Vue（标签属性：ref、配置项：props、混入mixin、插件、样式属性：scroped）

一、ref（打标识）

前面提及到了标签属性：keys

这里将了解ref：打标识

正常布置脚手架并创建入口文件main.js,引入组件

1. 可以给元素注册引用信息（获取真实DOM）

给一个按钮获取上方的dom的方法，方法中使用什么进行获取dom元素

• 是使用获取id方法给标签设置id，直接操作dom？  错误❌

• 既然原生js可以给dom添加id，那么Vue也有类似的标识方法：ref

• 获取打了标识的dom：vc上面的$refs

//通过ref进行设置标识：title
<h1 v-text="msg" ref="title"></h1>
<button @click="showDOM">点我输出上方的dom元素</button>
//通过vc下的refs进行获取通过ref标识的dom
console.log(this.$refs.title);//真实DOM

2. 给子组件注册引用注册信息（获取组件实例对象）

注意：可以直接在子组件上通过ref标识，然后也可以通过当前vc的$refs进行获取到子组件实例对象

methods: {showDOM () {console.log(this);//获取当前的组件vcconsole.log(this.$refs.title);//真实DOMconsole.log(this.$refs.btn);//真实DOMconsole.log(this.$refs.school);//vc：school组件的实例对象}},

二、配置项：props （接收数据配置项）

若想实现使用三次组件相同但是获取到的数据不同：就需要引入新的配置项

那么被复用能获取不同数据的组件就不能直接放代理的数据

父组件中组件标签调用组件：传入数据

<Student name='李四' sex='女' :age='18'/>

子组件本身：接收数据(props:接收)：存在三种接收数据方式

props:[ 'name','age','sex']      名字必须对上，但顺序无所谓

如果想要接受的数据时处理后的数据就出现问题（因为直接传入的数据是字符串数据），想要直接使用数据传入，模板就无法解析就会报错

解决：可以对模板中数据前置转换：age*1+1

解决：在发送数据的部分数据名前面进行绑定  :age 因为v-bind绑定数据，引号里是运行表达式返回结果，所以会直接变成数值数据

props:{  name:String,  age:Number,  sex:String,   }

获取到的数分别是字符串、数值、字符串

接收同时对数据限制+默认值指定+必要性限制 

props: {name: {type: String,//类型required: true,//名字必须得传},age: {type: Number,default: 99,//如果不传年龄直接99},sex: {type: String,required: true,}}

设置传递数据：

• type：传递属性

• required：数据必须传递

• default：不传数据就会直接返回值默认值

• 传递进去通过浏览器展示之后不可以更改

<h2>学生年龄：{{age+1}}</h2>
<button @click="change">尝试修改外部传进来年龄信息</button>
//vue
props:[ 'name','age','sex']//简单声名接收
//数据发生变化的方法methods: {change () {this.age++}},//此时会报错：因为传入的数据不能发生变化

• 解决修改传入数据：

• 传递之后的数据优先级比自身设置的data数据优先级高

• 这时候传递进来的数据赋值给data中如果自己命名数据

• 可以将标签中读取的数据从获取数据名字转为自己data设置的数据名字

 <h2>学生年龄：{{myAge+1}}</h2><button @click="change">尝试修改外部传进来年龄信息</button>
//vuedata () {return {msg: '我爱学习',// name:'张武'  //数据以外部传进来为主myAge: this.age}},
props:[ 'name','age','sex']//简单声名接收
methods: {change () {this.myAge++}},

传入数据的名字不应该使用标签属性：例如key、ref

三、mixin混入

两个组件共享相同配置

1. 局部混入 

1. 创建混入：mixin.js文件（使用分别暴露）

export const mixin = {methods: {showName() {alert(this.name)}},

2.引入混合：直接在使用的组件部分引入（分别暴露使用花括号形式引入）

根据混入文件中暴露部分名字

import {mixin} from './mixin'

3. 使用混合：新的配置项mixins （必须写成数组形式）写在组件中

  mixins:[mixin]

注意：

• 组件配置内容比混入优先级高 

• 生命周期钩子不以组件或者混合为主（都会执行：混合钩子靠前使用）

 2. 全局混入

不在组件中引入混入，而是在main.js文件中引入

1. 在main中引入的暴露配置

2. 然后再main中是使用api：Vu.mixin(name)使用混入

在main.js中引入并使用mixin中配置之后就会应用在全局：每一个vc，vm都会应用到

四、插件（增强Vue，可以接收参数） 

本质对象，必须包含install，第一个参数是vue的构造函数

1.直接在src中编写：plugins.js

export default{install() {console.log("@install");
}

2. 在main.js中引入

// 引入插件
import plugin from './plugins'

3. 在main.js中使用插件 

Vue.use(plugins)

使用use的时候传入一个参数输出的是vue的构造函数 

export default{install(Vue) {console.log(Vue);
}

使用use时候传入多个参数插件都可以接收到

//main.js
Vue.use(pluginsz,1,2,3)
//plugins
export default{install(Vue, x, y,z) {console.log(x,y,z);
}

 

 直接在插件中配置多个配置项添加参数

• 配置plugs插件
• main文件中引入
• 使用api：Vue.use(插件名字)

export default{install(Vue, x, y) {console.log(x,y);// 全局过滤器Vue.filter("mySilice", function (value) {return value.slice(0, 4);});// 全局自定义指令(获取焦点)配合新生成的实例Vue.directive("fbind", {bind(element, binding) {element.value = binding.value;},// 插入页面时候调用inserted(element, binding) {element.focus();},// 指令所在模板重新解析时候update(element, binding) {element.value = binding.value;},});//定义混入Vue.mixin({data() {return {x: 1000,y:2000}}})// 给Vue原型上添加一个方法（vm和vc都可以使用）Vue.prototype.hello = ()=>(alert('hello'))}
}

注意：可以使用很多插件并通过use使用插件

五、scroped，lang组件样式属性

1.scroped

子组件中的样式最终都会汇总 到一块：类名冲突（谁后在app中引入顺序就决定使用哪个组件中的样式）

//app组件中使用，后引入的决定组件样式
import School from './components/School'
import Student from './components/Student';

//school组件中
.demo {background-color: orange;
}
//student组件中
.demo {background-color: pink;
}

解决：scroped（作用域：只在当前组件生效）

给外侧组件div生成特殊的标签属性

app组件不适用：app组件的样式是所有很多组件都会使用

 

<style scroped>
.demo {background-color: orange;
}
</style>

2. lang 

可以使用css编译或者less预编译，但是脚手架无法处理less，

解决：需要安装less-loader

less-loader最新版本应该匹配webpack的最新版本

<style lang="css">
.demo {background-color: orange;
}
</style>

<style lang="less">
.demo {background-color: blue;.qwe {font-size: 80px;}
}
</style>

解决：less-loader版本和webpack版本的差异 

查看webpack版本和less-loader版本应该匹配

npm view webpack version
npm view less-loader version

• webpack4匹配的是less-loader7
• webpack5匹配的 是less-loader8、9