v-xxx 自定义指令
vue 官网 自定义指令
一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。
钩子函数会接收到指令所绑定元素作为其参数。
在 <script setup> 中任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。如 vFocus 即可以在模板中以 v-focus 的形式使用。
在没有使用 <script setup> 的情况下自定义指令需要通过 directives 选项注册
全局注册自定义指令
<template> <input v-focus /></template> 使用 <script setup> <script setup> // 在模板中启用 v-focus const vFocus { mounted: (el) > el.focus(), };</script> 没有使用 <script setup> <script> export default { directives: { // 在模板中启用 v-focus focus: { mounted: (el) > el.focus(), }, }, };</script> 全局注册 const app createApp({});// 使 v-focus 在所有组件中都可用app.directive(focus, { mounted(el) { el.focus(); // 聚焦元素 },}); 仅仅需要在 mounted 和 updated 上实现相同的行为除此之外并不需要其他钩子。可直接简化用一个函数来定义指令 <div v-colorcolor></div> app.directive(color, (el, binding) > { // 这会在 mounted 和 updated 时都调用 el.style.color binding.value;}); 一个指令的定义对象可以提供几种钩子函数 const myDirective { created(el, binding, vnode, prevVnode) {}, // 在绑定元素的 attribute 前 或事件监听器应用前调用 beforeMount(el, binding, vnode, prevVnode) {}, // 在元素被插入到 DOM 前调用 mounted(el, binding, vnode, prevVnode) {}, // 在绑定元素的父组件 及他自己的所有子节点都挂载完成后调用 beforeUpdate(el, binding, vnode, prevVnode) {}, // 绑定元素的父组件更新前调用 updated(el, binding, vnode, 便宜美国vps prevVnode) {}, // 在绑定元素的父组件 及他自己的所有子节点都更新后调用 beforeUnmount(el, binding, vnode, prevVnode) {}, // 绑定元素的父组件卸载前调用 unmounted(el, binding, vnode, prevVnode) {}, // 绑定元素的父组件卸载后调用}; el指令绑定到的元素是真实 DOM 节点。可以用于直接操作 DOM。如 <div><button>…</button></div> (没有 el 的情况)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指令的定义对象。 vnode代表绑定元素的底层 VNode。Vue 编译生成的虚拟节点prevNode之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。 20379385
