全局注册Vue.directive

1.src目录下新建directives文件

export default {
    install: function(Vue, option) {
        // 1：el指绑定的dom元素
        // 2：binding一个对象，包含指令的很多信息, 使用时可以绑定的值
        // 3：vnodeVUE编译生成的虚拟节点
        Vue.directive('focus', {
            bind: function (el, binding, vnode) {
                el.style['color'] = binding.value
            }, // 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
            inserted: function () {}, // 被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
            update: function () {}, // 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
            componentUpdated: function () {}, // 被绑定的元素所在模板完成一次更新更新周期的时候调用
            unbind: function () {} // 只调用一次，指令元素解绑的时候调用
        })
    }
}

2.min.js中全局引入

import directive from './directive/directive' // 引入directive

Vue.use(directive) // 引入directive

3.组件中使用自定义指令

<template>
  <el-row :gutter="6" class="box">
      <!-- directive第一个参数就是绑定的指令名称 -->
      <div v-change-color="color">点我</div>
  </el-row>
</template>

<script>
export default {
  name: 'BigScreen',
  data() {
    return {
        color: 'red'
    }
  }
}
</script>