全局自定义指令
main.ts
import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';
const app = createApp(App);
// 注册
app.directive('my-directive', {
// 指令具有一组生命周期钩子:
// 在绑定元素的 attribute 或事件监听器被应用之前调用
created() {},
// 在绑定元素的父组件挂载之前调用
beforeMount() {},
// 在绑定元素的父组件挂载之后调用
mounted() {},
// 在包含组件的 VNode 更新之前调用
beforeUpdate() {},
// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
updated() {},
// 在绑定元素的父组件卸载之前调用
beforeUnmount() {},
// 在绑定元素的父组件卸载之后调用
unmounted() {}
})
// 注册 (函数指令)
app.directive('my-directive', (el, binding, vnode) => {
// 这将被作为 `mounted` 和 `updated` 调用
})
// getter, 如果已注册,则返回指令定义
const myDirective = app.directive('my-directive
el => 指令绑定到的元素。这可用于直接操作 DOM。
binding => 包含以下 property 的对象。
instance
:使用指令的组件实例。value
:传递给指令的值。例如,在v-my-directive="1 + 1"
中,该值为2
。oldValue
:先前的值,仅在beforeUpdate
和updated
中可用。无论值是否有更改都可用。arg
:传递给指令的参数(如果有的话)。例如在v-my-directive:foo
中,arg 为"foo"
。modifiers
:包含修饰符(如果有的话) 的对象。例如在v-my-directive.foo.bar
中,修饰符对象为{foo: true,bar: true}
。dir
:一个对象,在注册指令时作为参数传递。vnode => 一个真实 DOM 元素的蓝图,对应上面收到的 el 参数。
⚠️ 注意
除了
el
之外,你应该将这些参数视为只读,并且永远不要修改它们。如果你需要跨钩子共享信息,建议通过元素的自定义数据属性集进行共享。
- 参考:自定义指令