Vue2/vue3 添加全局/局部自定义指令实例详解

在Vue中，可以通过全局或局部方式来添加自定义指令。下面分别详细介绍全局和局部自定义指令的添加方式。

全局自定义指令

全局自定义指令可以在整个应用中的任何组件中使用。

Vue2版本中，可以通过在Vue实例上使用`Vue.directive()`方法来注册全局自定义指令。

例如：

// 全局注册一个自定义指令
Vue.directive('my-directive', {
  // 指令的定义
  bind(el, binding, vnode) {
    // 指令绑定时的逻辑
  },
  ...
});

Vue3版本中，可以通过在应用的入口文件中使用`app.directive()`方法来注册全局自定义指令。

例如：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 注册全局自定义指令
app.directive('my-directive', {
  // 指令的定义
  mounted(el, binding, vnode) {
    // 指令绑定时的逻辑
  },
  ...
});

app.mount('#app');

上述例子中的`my-directive`是自定义指令的名称，指令的定义是一个对象，包含了各种钩子函数。钩子函数中的`el`参数表示指令绑定的元素，`binding`参数包含了指令的信息，`vnode`参数表示当前的虚拟节点。

注册完成后，全局自定义指令就可以在应用的任何组件中使用了。

局部自定义指令

局部自定义指令只能在特定的组件中使用，无法在其他组件或全局中访问。

Vue2版本中，可以在组件的`directives`选项中定义局部自定义指令。

例如：

Vue.component('my-component', {
  // 组件选项
  directives: {
    'my-directive': {
      // 指令的定义
      bind(el, binding, vnode) {
        // 指令绑定时的逻辑
      },
      ...
    }
  }
});

Vue3版本中，可以在组件的`directives`选项中定义局部自定义指令，与Vue2版本类似。

例如：

// MyComponent.vue
export default {
  // 组件选项
  directives: {
    'my-directive': {
      // 指令的定义
      mounted(el, binding, vnode) {
        // 指令绑定时的逻辑
      },
      ...
    }
  }
}

上述例子中的`my-directive`是自定义指令的名称，指令的定义是一个对象，包含了各种钩子函数。

局部自定义指令只能在当前组件中使用，无法在其他组件或全局中使用。

以上是在Vue2和Vue3中添加全局和局部自定义指令的示例。无论是全局还是局部自定义指令，都可以根据需求来定义指令的行为，并在组件的模板中通过指令的方式来使用它们。