vue3之自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令。自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

写法

1. 没有使用 <script setup>的情况下

export default {setup() {/*...*/},directives: {// 在模板中启用 v-focusfocus: {/* ... */}}
}<template><input v-focus />
</template>

2. 全局注册

const app = createApp({})
// 使 v-focus 在所有组件中都可用
app.directive('focus', {/* ..提供几种钩子函数.. */// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode, prevVnode) {// 下面会介绍各个参数的细节//<div v-example:foo.bar="baz">//binding 参数会是一个这样的对象：{arg: 'foo',modifiers: { bar: true },value: /* `baz` 的值 */,oldValue: /* 上一次更新时 `baz` 的值 */}},// 在元素被插入到 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) {}
})<template><input v-focus />
</template>

3. 给指令转参，对象字面量

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

4. 在组件上使用—不推荐使用

<MyComponent v-demo="test" />
不推荐使用原因：组件内可能含有多个根节点，指令将会被忽略且抛出一个警告。