除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令。
在 <script setup> 中,任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。
<script setup> // 在模板中启用 v-focus const vFocus = { mounted: (el) => el.focus() } </script> <template> <input v-focus /> </template>
在没有使用 <script setup>
的情况下,自定义指令需要通过 directives
选项注册:
export default { setup() { /*...*/ }, directives: { // 在模板中启用 v-focus focus: { /* ... */ } } }
将一个自定义指令全局注册到应用层级也是一种常见的做法。
const app = createApp({}) // 使 v-focus 在所有组件中都可用 app.directive('focus', { /* ... */ })