vue3 自定义指令传参

在 Vue 3 中，你可以通过使用自定义指令来传递参数。下面是一个示例：

首先，你需要定义一个全局的自定义指令，可以在应用程序的入口文件或者组件中进行定义。例如，在 main.js 文件中：

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

const app = createApp(App);

app.directive('my-directive', {
  mounted(el, binding) {
    // 获取传递的参数
    const arg = binding.arg;
    const value = binding.value;

    // 在这里处理自定义指令的逻辑
    console.log('自定义指令参数:', arg, value);
  },
});

app.mount('#app');

然后，在你的组件模板中使用这个自定义指令，并传递参数：

<template>
  <div v-my-directive:argName="value"></div>
</template>

在上面的代码中，`v-my-directive` 是你定义的自定义指令名，`argName` 是你要传递的参数名，`value` 是传递的具体值。

当应用程序运行时，自定义指令会在指定的元素上被挂载，并且可以通过 `binding` 对象访问到传递的参数。在上述示例中，我们通过 `binding.arg` 获取了参数名 `argName` 的值，通过 `binding.value` 获取了具体的值 `value`。

你可以根据需求在 `mounted` 生命周期钩子函数中处理自定义指令的逻辑，例如改变元素的样式、绑定事件等。