Vue 中的进阶属性

1.directives--组件

全局组件

//定义一个名为x的组件，当元素被插入到页面后监听click事件，打印出x
//直接在要插入的元素标签内加上v-x就可以执行改组件
Vue.directive(‘x’,{
inserted: function (el) {
el.addEventListener('click',() =>{console.log('x')})
},
})

局部组件：直接在new Vue中声明directive，只能用在声明的实例中

new Vue({
...
  directives: {
   x: {
    inserted(el) {
      el.addEventListener("click", () => {
        console.log("x");
         });
       },
     },
   },
})

2.directives的属性

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

*以上五个属性到包括这五个参数(el,info,vnode,oldVnode),bind的参数都是vue传来的，el表示所绑定的元素，info包含了很多需要用到的信息，vnode表示虚拟节点，oldVnode表示旧的虚拟节点。

3.手写一个v-on事件

//组件名为on2，
directives: {
    on2: {
      inserted(el, info) {//当元素被插入到页面中时，
        el.addEventListener(info.arg, info.value);//监听元素的事件以及对应的值
      },
unbind(el, info) {//当元素消亡时删除监听 
        el.removeEventListener(info.arg, info.value);
      }
    }
  },

4.mixins--混入

示例

简单来说就是复制，目的是减少构造选项的重复.

将重复的代码写入mixins文件中，导出再引入，则具有相同操作的模块就可以直接引用mixins中的代码，相当于复制粘贴。

5. extends--继承

• 类型：Object | Function

• 详细：

  允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。

  这和 mixins 类似。

• 示例：

  var CompA = { ... }
  
  // 在没有调用 `Vue.extend` 时候继承 CompA
  var CompB = {
    extends: CompA,
    ...
  }
  

6.provide--提供/inject--注入

示例

在一个Vue文件中更改另一个Vue文件中的某个选项，就可以在原来的Vue文件provide选项，在另一个Vue文件inject选项，就可以更改原来的值。

原Vue提供以下属性

provide() {
    return {
      themeName: this.themeName,
      fontSizeNmae: this.fontSizeName,
      changeTheme: this.changeTheme, 
      changeFontSize: this.changeFontSize
    };
  },

注入到另一个Vue中

export default {
  inject: ["themeName", "changeTheme", "changeFontSize"]
};