Vue3之自定义指令

Vue 内置的一系列指令，比如v-html，v-if等等，我们也可以使用自定义的指令。

使用

<template>
  <input v-focus />
</template>

<script setup>
// 在模板中启用 v-focus，这里是局部指令
const vFocus = {
  // 这是指令的钩子函数，下面会列举
  mounted: (el) => el.focus()
}
</script>
// 这是全局指令
const app = createApp({})

// 使 v-focus 在所有组件中都可用
app.directive('focus', {
  /* ... */
})

指令钩子

一个指令的定义对象可以提供几种钩子函数 (都是可选的)，其实一般情况下我们只会用到mounted和updated这两个钩子。

  // 在绑定元素的 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) {}

钩子参数

1.el：指令绑定到的元素。这可以用于直接操作 DOM。
2.binding：一个对象，包含以下属性。

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

3.vnode：代表绑定元素的底层 VNode。
4.prevNode：代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

<template>
  <div v-mydirective:foo.bar="baz">
<template>
<script setup>
import { ref } from "vue";
// baz不一定是字符串，也可以是一个对象、数组、函数
const baz = ref("hello");
const vMydirective = {
  // 这是指令的钩子函数，下面会列举
  mounted: (el,binding) => {
     el：指令绑定到的元素,就是这个div。
     binding.value： 就是baz这个变量，值为"hello"。
     binding.arg：就是:后面第一个，返回的是字符串"foo"。
     binding.modifiers：修饰符对象，返回的是对象{ foo: true, bar: true }。
     binding.oldValue：上一次更新时 baz 的值。
     ......
  }
}
</script>

动态参数

// 获取到binding.arg是动态的
<div v-example:[arg]="value"></div>