vue3自定义指令使用

Vue3中的自定义指令可以通过`directive`函数来创建。下面是一个简单的例子：

// 注册一个全局自定义指令 `v-focus`
const app = Vue.createApp({});
app.directive('focus', {
  // 当被绑定的元素挂载到 DOM 中时……
  mounted(el) {
    // 聚焦元素
    el.focus();
  }
})

上述代码中，我们通过`app.directive`函数注册了一个名为`v-focus`的全局自定义指令，并在其中定义了`mounted`生命周期钩子函数，该函数会在指令所绑定的元素被插入到DOM中时执行，从而实现了让该元素自动获取焦点的功能。

除了全局自定义指令，我们还可以通过`setup`语法糖来定义局部自定义指令。下面是一个示例：

<template>
  <div v-bg>局部自定义指令</div>
</template>

<script setup>
const vBg = {
  mounted(el) {
    el.style.backgroundColor = 'green';
  }
}
</script>

上述代码中，我们通过`<script setup>`标签中的代码定义了一个名为`vBg`的局部自定义指令，并在其中定义了`mounted`生命周期钩子函数，该函数会在指令所绑定的元素被插入到DOM中时执行，从而实现了让该元素的背景色变为绿色的功能。

相关问题

vue3自定义指令的使用

在Vue 3中，自定义指令的使用方式与Vue 2有所不同。Vue 3使用了Composition API，其中包括了一个新的`directive`函数来定义自定义指令。下面是一个使用Vue 3自定义指令的示例：

<template>
  <div>
    <input v-my-directive />
  </div>
</template>

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

const myDirective = directive('my-directive', {
  mounted(el) {
    el.focus();
  }
});

export default {
  directives: {
    'my-directive': myDirective
  }
}
</script>

在上面的示例中，我们首先通过`directive`函数创建了一个名为"my-directive"的自定义指令，并在`mounted`钩子函数中实现了一个简单的功能，使绑定元素获取焦点。然后，将该自定义指令添加到组件的`directives`选项中。

值得注意的是，在Vue 3中，自定义指令不再支持全局注册。你需要在每个使用该指令的组件中进行局部注册。

另外，Vue 3还引入了新的API `createApp` 来创建Vue应用程序实例，你需要在创建实例之前使用 `app.directive` 来注册自定

VUE3 自定义指令 全局

Vue3中的自定义指令是一种特殊的方式，用于增强组件的功能，使其能够响应DOM元素的变化并执行相应的操作。全局注册自定义指令意味着在整个项目范围内都可以使用该指令，无需每次都通过`v-`前缀在每个组件上单独声明。

全局注册自定义指令的步骤如下：

1. 首先，在Vue实例创建之前，通常在`main.js`或其他应用启动文件里，需要导入Vue，并提供一个插件来配置全局指令。例如：

import { createApp } from 'vue';
import App from './App.vue';
import globalDirectives from './directives/global';

const app = createApp(App);
app.directive('custom-directive', globalDirectives); // 注册全局指令
app.mount('#app');

2. `globalDirectives`是一个对象，其中包含了你想作为全局指令使用的函数。每个属性名是指令的名称，值是一个返回函数的表达式，这个函数接受两个参数：el（目标元素）和 Binding（指令绑定的对象）：

export const globalDirectives = {
  customDirective: (el, binding) => {
    el.addEventListener('click', () => {
      console.log(`Custom directive called on element with value: ${binding.value}`);
    });
  }
};

在这个例子中，当页面上的元素触发`click`事件时，会打印出对应的指令绑定值。