【vue】Vue.directive的使用总结

主要分为2.x和3.x的使用

vue2.0

// 注册方式一
Vue.directive('focus', {
  // 只执行一次，指令第一次绑定到元素时调用
  bind: function (el,binding,vnode,oldVnode) {
    // el：你写v-xxx的dom
    // binding：一个对象，里面有传值
    // vnode：Vue 编译生成的虚拟节点。
    // oldVnode：上一个虚拟节点，仅在update和componentUpdated中可用
  },
  // 被绑定元素插入父节点时调用 
  inserted: function (el,binding,vnode,oldVnode) {
     // 聚焦元素
    el.focus()
  },
  // 所在组件的 VNode 更新时调用
  update: function (el,binding,vnode,oldVnode) {},
  // 下面两个不常用
  componentUpdated: function (el,binding,vnode,oldVnode) {},
  unbind: function (el,binding,vnode,oldVnode) {}
})
// 注册方式二--指令函数
Vue.directive('focus', function (el,binding,vnode,oldVnode) {
  // 这里将会被 `bind` 和 `update` 调用
})

使用

使用的话直接在标签里 v-focus即使用，focus就是上面你命名的字段

<input v-focus />

传值

普通传值

<div v-pin="200"> </div>

--接收，binging.value里就是传过来的200

Vue.directive('pin', {
  bind: function (el,binding,vnode,oldVnode) {
    // binging.value里就是传过来的200
  },
})

动态指令参数

--就是高级一点的传值

<template>
  <div>
     <div  v-pin[direction]="200" ></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      direction: 'left'
    };
  },
};
</script>

--接受使用
---arg里就是[direction]的值，通过这个可以进行精确一点的操作

Vue.directive('pin', {
  bind: function (el,binding,vnode,oldVnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  },
})

vue3.0

3.0与2.0区别在于更加生命周期化，往下看就明白了

注册

const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
  created(){},
  beforeMount(){},
  mounted(el) {
    // 聚焦元素
    el.focus()
  },
  beforeUpdate(){},
  updated(){},
  beforeUnmount(){},
  unmounted(){},
})
// 注册方式二--指令函数
Vue.directive('focus', function (el,binding,vnode,oldVnode) {
  // 这里将会被 `mounted` 和 `updated` 调用
})

--使用

<input v-focus />

传值方面和2.0的差不多