指令钩子
const myDirective = {
// 在绑定元素的 attribute 前
// 或事件监听器应用前调用
created(el, binding, vnode, prevVnode) {
// 下面会介绍各个参数的细节
},
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {}
}
钩子函数
el:指定绑定到的元素,可以直接操作dom
binding: 对象 包含以下属性
value: 传递给指令的值
oldValue:仅在beforeUpdate和updated中使用 无论值是否更改,都可以用
arg: 传递给指令的参数 例如my-directive:foo 参数便是foo
modifiers:修饰符对象 例如:v-my-directive.foo.bar 修饰符对象是{foo:true,bar:true}
instance:使用该指令的组件实例
dir:指令定义的对象
vnode:代表绑定元素底层的VNode
prevnode:代表之前的渲染中指令绑定元素的VNode仅在beforeUpdate和updated钩子中使用
注意:不推荐在组件上使用自定义指定 ,当应用到一个多根组件时,指令将会被忽略且抛出一个警告