自定义局部指令和自定义全局指令

在 Vue 3 中，你可以定义局部指令（仅在组件内部定义）和全局指令（在整个应用范围内定义）。下面我将分别介绍如何定义这两种指令，并给出详细的代码示例。

1. 局部指令 (Local Directive)

局部指令是在单个组件内部定义的指令，只能在该组件内部使用。

示例代码

1. 定义局部指令：

   // highlight.directive.js
   export default {
     mounted(el, binding, vnode) {
       // 当元素被插入到 DOM 中时，应用高亮样式
       el.style.backgroundColor = binding.value || 'yellow';
     },
     updated(el, binding) {
       // 当绑定值更新时，更新元素的背景颜色
       el.style.backgroundColor = binding.value || 'yellow';
     },
     unmounted(el) {
       // 当元素被移除时，清除样式
       el.style.backgroundColor = '';
     }
   };
   

2. 在组件中使用局部指令：

   <!-- MyComponent.vue -->
   <template>
     <div>
       <p v-highlight="color">Highlight this text</p>
       <button @click="toggleColor">Toggle Color</button>
     </div>
   </template>
   
   <script setup>
   import { ref } from 'vue';
   import highlightDirective from './highlight.directive';
   
   // 定义局部指令
   defineDirective('highlight', highlightDirective);
   
   const color = ref('lightblue');
   
   function toggleColor() {
     color.value = color.value === 'lightblue' ? 'yellow' : 'lightblue';
   }
   </script>
   

2. 全局指令 (Global Directive)

全局指令是在整个 Vue 应用范围内定义的指令，可以在任何组件中使用。

示例代码

1. 定义全局指令：

   // highlight.directive.js
   export default {
     mounted(el, binding, vnode) {
       // 当元素被插入到 DOM 中时，应用高亮样式
       el.style.backgroundColor = binding.value || 'yellow';
     },
     updated(el, binding) {
       // 当绑定值更新时，更新元素的背景颜色
       el.style.backgroundColor = binding.value || 'yellow';
     },
     unmounted(el) {
       // 当元素被移除时，清除样式
       el.style.backgroundColor = '';
     }
   };
   

2. 注册全局指令：

   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import highlightDirective from './highlight.directive';
   
   const app = createApp(App);
   
   // 注册全局指令
   app.directive('highlight', highlightDirective);
   
   app.mount('#app');
   

3. 在组件中使用全局指令：

   <!-- App.vue -->
   <template>
     <div>
       <p v-highlight="color">Highlight this text</p>
       <button @click="toggleColor">Toggle Color</button>
     </div>
   </template>
   
   <script setup>
   import { ref } from 'vue';
   
   const color = ref('lightblue');
   
   function toggleColor() {
     color.value = color.value === 'lightblue' ? 'yellow' : 'lightblue';
   }
   </script>
   

说明

局部指令

• 定义局部指令：

  • 在 highlight.directive.js 文件中定义了一个名为 highlight 的自定义指令。
  • mounted 钩子函数会在元素被插入到 DOM 中时应用高亮样式。
  • updated 钩子函数会在绑定值更新时更新元素的背景颜色。
  • unmounted 钩子函数会在元素被移除时清除样式。

• 在组件中使用局部指令：

  • 在 MyComponent.vue 文件中，使用 defineDirective 函数定义了一个局部指令。
  • 使用 v-highlight 指令将高亮效果应用到一个段落元素上。
  • v-highlight 指令接受一个表达式作为参数，该表达式可以是一个绑定值，如 color。
  • 点击按钮时，toggleColor 函数会切换 color 的值，从而改变段落的背景颜色。

全局指令

• 定义全局指令：

  • 在 highlight.directive.js 文件中定义了一个名为 highlight 的自定义指令。
  • mounted 钩子函数会在元素被插入到 DOM 中时应用高亮样式。
  • updated 钩子函数会在绑定值更新时更新元素的背景颜色。
  • unmounted 钩子函数会在元素被移除时清除样式。

• 注册全局指令：

  • 在 main.js 文件中，使用 createApp 创建一个 Vue 应用实例。
  • 使用 app.directive() 方法注册全局指令。

• 在组件中使用全局指令：

  • 在 App.vue 文件中，使用 v-highlight 指令将高亮效果应用到一个段落元素上。
  • v-highlight 指令接受一个表达式作为参数，该表达式可以是一个绑定值，如 color。
  • 点击按钮时，toggleColor 函数会切换 color 的值，从而改变段落的背景颜色。

总结

通过上述示例，你可以看到如何在 Vue 3 中定义和使用局部指令和全局指令。局部指令仅在定义它的组件内部有效，而全局指令则在整个应用范围内有效。使用组合式 API 和 <script setup> 语法糖，你可以更简洁地定义和使用自定义指令。