VUE3-自定义指令

自定义指令的使用

何时使用自定义指令：

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

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

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

注册

1、全局注册

• app.directive(‘focus’, {})

2、局部注册

• 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!"
})