<template>
<div>
<input v-focus />
</div>
</template>
<script>
// 在需要使用指令的组件中导入 createApp
import { createApp } from 'vue';
// 创建自定义指令
const focusDirective = {
// 当被绑定的元素挂载到 DOM 中时
mounted(el) {
// 聚焦元素
el.focus();
},
};
// 创建应用实例
const app = createApp({
// ...
// 注册自定义指令
directives: {
focus: focusDirective,
},
});
// ...
app.mount('#app');
</script>
在上面的例子中，我们创建了一个名为 focus 的自定义指令，并在应用实例的 directives 选项中注册它。该指令在元素挂载到 DOM 后，自动将焦点聚焦在该元素上。
需要注意的是，在 Vue 3 中，自定义指令不再有 bind、update 和 unbind 这些钩子函数，而是直接使用 mounted、updated 和 unmounted。这样的变化是为了更好地与 Vue 3 的 Composition API 集成。
当然，你可以根据自己的需求来定义更复杂的自定义指令，比如带参数的指令、钩子函数等。如果需要更多高级的自定义指令，可以查阅 Vue 3 的官方文档以获取更详细的信息。
转载请注明出处：http://www.zyzy.cn/article/detail/12985/Vue3