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

点我输出上方的dom元素
//通过vc下的refs进行获取通过ref标识的dom
console.log(this.$refs.title);//真实DOM

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

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

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

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

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

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

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

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

1. 数组接收数据

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

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

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

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

2. 对象直接接收数据

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

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

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

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

设置传递数据：

• type：传递属性

• required：数据必须传递

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

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

学生年龄：{{age+1}}
尝试修改外部传进来年龄信息
//vue
props:[ 'name','age','sex']//简单声名接收
//数据发生变化的方法
  methods: {
    change () {
      this.age++
    }
  },

//此时会报错：因为传入的数据不能发生变化

• 解决修改传入数据：

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

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

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

 
学生年龄：{{myAge+1}}
 尝试修改外部传进来年龄信息
//vue
 data () {
    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.js中使用api：Vue.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组件的样式是所有很多组件都会使用

2. lang 

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

解决：需要安装less-loader

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

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

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

npm view webpack version
npm view less-loader version

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