Vue – 自定义指令

简介

vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令。除此之外vue 还允许开发者自定义指令。

私有自定义指令

在每个vue 组件中，可以在directives 节点下声明私有自定义指令。示例代码如下：

directives 与 methods 同级

directives:{
  <!-- foo 为 v-foo 指令名 -->
  foo:{
    <!-- el 将提供使用这个指令所在的元素原生对象，只要使用指令，就会触发 bind 方法 -->
    bind(el){
      console.log('触发了 v-foo 指令')
    }
  }
}

使用时在元素中加入指令即可。

<p v-foo> ... </p>

注意：bind 函数只会在第一次渲染时候触发，后续数做改变不会再次调用 bind 函数，如果要让后续数值变化依然触发，可以使用 update 函数

传参对象

指令可以进行传值，其传的值可以通过 bind 函数第二个参数获取，第二个参数是一个对象，其中的 value 值则为传递的参数值

directives:{
  foo:{
    bind(el, binding){
      console.log('指令值是：'+ binding.value)
    }
  }
}

vue3 中的 bind 改为 mounted(el, foo)

元素中传递数值

<p v-foo="xxx"> ... </p>

update 函数

bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时bind 函数不会被触发。 update 函 数会在每次 DOM 更新时被调用。

vue3 中的 update 改为 upodated(el, foo)

directives:{
  foo:{
    update(el, binding){
      console.log('每一次 DOM 数据更新的时候都会触发')
    }
  }
}

函数简写

因为 bind 和 update 函数的逻辑是一样的，所以可以直接用指令名作为一个函数，进行操作，其中包含了 bind 和 update 函数。

directives:{
  foo(){
      console.log('每一次 DOM 数据更新的时候都会触发')
    }
}
其中系统会自动生成 bind 和 update 函数

全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明

声明指定

Vue.directive('foo', {
  bind(el,binding){},
  update(el,binding){}
})

简写

Vue.directive('foo',function (el,binding)=>{ ... })