本文梳理一下 Vue 几个高级属性的基本使用方法，包括：

directives
mixins
extends
provide
inject

1、directives - 指令

指令的形式：v-xxx

内置指令

v-if v-for v-html v-bind 等

自定义指令

两种声明方式

1、全局

Vue.directive('x', directiveOptions)

全局指令v-x可以在任意组件使用

2、局部

在组件/实例内部声明：

new Vue({
  ...,
  directives:{
      x: directiveOptions
  }
})

只能在当前组件使用

directiveOptions 里有什么？

五个方法（钩子函数）

bind(el, info, vnode, oldVnode) ---- 类似 created，初始化
inserted(参数同上) ---- 类似 mounted
update(参数同上) ---- 类似 updated
componentUpdated(参数同上) ---- （不常用）
unbind(参数同上) ---- 类似 destroyed

示例：仿`v-on`指令`v-on2`

directives:{
    on2:{
      inserted(el, info){ //插入页面时调用，添加监听
        el.addEventListener(info.arg, info.value)
      },
      unbind(el,info){ //消亡时调用，删除监听
        el.addEventListener(info.arg, info.value)
      }
    }
}

然后就可以使用v-on2指令了

template:`
    <button v-on2:click="fn">点击</button>
`

其中的参数：

第一个el ---- 使用此指令的元素
第二个info ---- 一个对象，包含指令的一些信息：
- info.arg：指令的参数，本例中的 click
- info.value：指令的值，本例中的 fn

指令的作用

简化DOM 操作，减少重复：

某个 DOM 操作经常使用 ----> 封装为指令
某个 DOM 操作比较复杂 ----> 封装为指令

2、mixins - 混入

混入就是属性的复制，其目的是减少属性的重复。

示例

假设若干个组件有雷同的 options，将这重复的 options 封装为一个对象并导出：

// options.js 文件
const options = {
    data(){ return {...} },
    methods: {...},
	created(){...},
    ...
}
export default options

然后在各个组件中引入：

<script>
import options from '.../options.js'
export default {
    data(){ return {...} },
	mixins: [options] //可混入多个 mixin
}
</script>

组件便拥有了options所有属性的拷贝，而且混入的属性会与当前组件本身的属性智能合并，若有冲突，一般会以自身属性为准。

另：全局混入（不推荐） ---- `Vue.mixin`

Vue.mixin({
    混入的属性
})

这样，所有的组件都会混入这些属性。但辐射范围过大，有些混乱，不推荐使用。

3、extends - 继承

extends的作用和mixins一样，也是为了减少属性的重复，它是一种比mixins更抽象的封装

用法示例

用Vue.extend函数定义一个新的Vue函数newVue，导出：

// NewVue.js 文件
const NewVue = Vue.extend({
    构造属性 //此处也可用 mixins
})
export default NewVue

引用方法：

在 main.js 中导入，用NewVue生成实例：

import NewVue from '.../NewVue.js'

new NewVue({
    options
})

此处会自动继承在 Vue.extend中定义的属性

也可以在子组件中使用extends属性：

// Child.vue 文件
<script>
import NewVue from '.../NewVue.js'
export default {
    extends: NewVue //此处不能写为数组，extend 只支持继承一个
}
</script>

extends 和 mixins 的功能几乎一样，通常用 mixins 即可。

4、provide 和 inject - 提供和注入

作用：

祖先的 data、methods 复制一份给子孙，可隔代贯穿

用法：

祖先 provide，子孙 inject

【例】

父:

{
    data(){
        return {
            a: 1,
           	b:2
        }
    },
	methods: {
        fn1(){},
		fn2(){}
    },
        
	provide(){  // 祖先注入
        return {
            a: this.a,
            fn1: this.fn1
        }
    }
}

子：

{
	inject: ["a", "fn1"]
}

然后子组件就可以使用这些数据和方法了。

【注】：

简单类型数据传值，对象传址。
- 若注入简单类型，得到的是一份完整的拷贝，父子的数据相互独立，互不影响。
- 若注入对象，则是对同一对象的引用，操作任意一方都会影响另一方。
一般不建议注入一个对象，容易导致祖先的数据失控。如要在子组件中修改注入的值，则应将祖先的相关methods注入。

Vue学习笔记 - 构造选项的进阶属性