自定义指令使用场景
- 存在复杂业务逻辑处理，并且对dom更新相对较少，此时就会用到自定义指令
- 简化组件内部代码，此时就会用到自定义指令
- 当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令
- 需要减少代码改动，且存在多个相同业务逻辑的，此时就会用到自定义指令
自定义指令使用实例
const auths=["order","users","activity"];
const isAuth=(current)=>{
const roles=localStorage.getItem("auths");
const isR=current.some(item => auths.includes(item));
return isR;
}
Vue.directive('auths', {
//01
bind: function (el, binding, vnode) {
},
//02
inserted: function (el, binding) {
const current = binding.value
if(!current||!isAuth(current)){
el.parentNode && el.parentNode.removeChild(el);
}
},
//03
update: function (el, binding, vnode,oldVnode) {
},
//04
componentUpdated: function (el, binding, vnode,oldVnode) {
},
//05
unbind: function () {
},
})
<template>
<a v-auths="['order']">编辑订单</a>
</template>
触发顺序
如auths自定义指令中定义的顺序
自定义指令钩子函数
-
bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 -
update:所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。 -
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind: 只调用一次，指令与元素解绑时调用。
