vue3 directive

作者：硝烟发布日期:2026-03-10 浏览:57

// Vue 3 Directive 示例代码

<template>
  <div v-focus></div>
</template>

<script>
import { defineComponent, directive } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    // 定义一个自定义指令 `v-focus`
    directive('focus', {
      mounted(el) {
        // 当元素挂载时，自动聚焦该元素
        el.focus();
      }
    });
  }
});
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

v-focus 指令：这是一个自定义指令，用于在元素挂载时自动聚焦。通过 directive('focus', {...}) 定义。
mounted 钩子：当指令绑定的元素被插入到 DOM 中时，会触发 mounted 钩子函数。在这个例子中，我们调用了 el.focus() 方法，使元素获得焦点。
defineComponent：这是 Vue 3 中推荐的方式，用于定义组件，提供了更好的类型推断和开发体验。

这个示例展示了如何在 Vue 3 中创建和使用自定义指令。

上一篇：vue3 emits

下一篇：vue3入门