VUE3-自定义指令

自定义指令的使用

何时使用自定义指令：

• 只有当所需功能『只能通过直接的 DOM 操作』来实现时

不推荐在组件上使用自定义指令 — 多根组件

• 始终应用于组件的根节点，和透传 attributes 类似
• 指令不能通过 v-bind=”$attrs” 来传递给一个不同的元素

注册

• 全局注册

  app.directive('focus', {})

• 局部注册

  directives: {foucs /* 启用 v-focus*/}

指令钩子

el

• 指令绑定到的元素。用于直接操作 DOM。
• 除了 el 外，其他参数都是只读的

binding

• 一个对象，包含以下属性
• value: 传递给指令的值
• oldValue: 之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
• arg: 传递给指令的参数
• modifiers: 一个包含修饰符的对象。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
• instance: 使用该指令的组件实例
• dir: 指令的定义对象

vnode

• 代表绑定元素的底层 VNode

prevNode

• 之前的渲染中代表指令所绑定元素的 VNode

  const myDirective = {
    // 在绑定元素的属性或事件监听器应用前调用
    created(el, binding, vnode) {},
  
    // 在元素被插入到 DOM 前调用
    beforeMount(el, binding, vnode) {},
  
    // 在绑定元素的父组件及他自己的所有子节点都挂载完成后调用
    mounted(el, binding, vnode) {},
  
    // 绑定元素的父组件更新前调用
    beforeUpdate(el, binding, vnode, prevVnode) {},
  
    // 在绑定元素的父组件及他自己的所有子节点都更新后调用
    updated(el, binding, vnode, prevVnode) {},
  
    // 绑定元素的父组件卸载前调用
    beforeUnmount(el, binding, vnode) {},
  
    // 绑定元素的父组件卸载后调用
    unmounted(el, binding, vnode) {}
  }

简化形式 — 仅用 mounted 和 updated 的指令

<div v-color="color"></div>

app.directive('color', (el, binding) => {
  // 这会在 `mounted` 和 `updated` 时都调用
  el.style.color = binding.value
})

对象字面量 — 指令需要多个值

<div v-demo="{ color: 'white', text: 'hello!' }" ></div>

app.directive('demo', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
})