Directives 指令

自定义指令

两种写法

声明一个全局指令

Vue.directive('y',directiveOptions)
就可以在任何组件里使用v-y了

Vue.directive('y',{
    inserted(el){
        el.addEventListener('click',()=>console.log("y"))
}})

声明一个局部指令

new Vue({
    ...,
    dierctive:{
        "x"directiveOptions
    }
})

v-x 只能用在该实例中

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

directiveOptions

五个函数属性
bind(el,info,vnode,oldVnode) - 类似created
inserted(el,info,vnode,oldVnode) - 类似mounted
update(el,info,vnode,oldVnode) - 类似update
componentUpdate(el,info,vnode,oldVnode)
unbind(el,info,vnode,oldVnode) - 类似destroyed

自制v-on2指令，模仿v-on

new Vue({
  directives: {
    on2: {
      inserted(el, info) {
        el.addEventListener(info.arg, info.value);
      },
      unbind(el, info) {
        el.removeEventListener(info.arg, info.value);
      },
    },
  },
  template: `
    <button v-on2:click="hi">点我</button>
  `,
  methods: {
    hi() {
      console.log("hi");
    },
  },
}).$mount("#app");

指令的作用

主要用于DOM操作
Vue实例/组件用于数据绑定，事件监听，DOM更新
Vue指令主要目的就是原生DOM操作
减少重复
如果某个DOM操作你经常使用，就可以封装为指令
如果某个DOM操作比较复杂，也可以封装为指令

Mixins

减少重复

类比：
directives的作用是减少DOM操作的重复
mixins的作用是减少data、methods、钩子的重复

场景描述
假设我们需要在每个组件上添加name和time
在created、beforeDestroy时。打出提示。并报出存活时间
示例如下：
useMixin - CodeSandbox

Extends

减少重复

与mixins同样的需求
可以使用Vue.extend或options.extends

Provide 和 Inject

使用举例

需求

一键换肤功能，默认蓝色，可以切换为红色
文字大小：默认正常，可以改成大或小
provide&inject - CodeSandbox

总结

作用：大范围的data和method等共用
注意：不能只传themeName不传changeTheme，因为themeName的值是被复制给provide的

Directives、Mixin、Extend、Provide、inject