vue3 app.directive 中的mounted用法

在 Vue3 中，app.directive 可以用于全局注册自定义指令。在注册时，可以传入一个对象，该对象包含了钩子函数和指令的配置信息。

其中，mounted 钩子函数是在指令绑定到元素上后执行的函数。它接收四个参数：

- el：指令绑定的元素
- binding：一个对象，包含了指令的相关信息，如指令名称、绑定的值、修饰符等
- vnode：Vue 编译生成的虚拟节点
- prevVnode：上一个虚拟节点

在 mounted 钩子函数中，可以对元素进行一些初始化操作，或者绑定事件监听器等。

例如，以下是一个简单的自定义指令，它在元素上绑定了一个点击事件监听器，并在点击时弹出一个提示框：

app.directive('my-directive', {
  mounted(el, binding, vnode, prevVnode) {
    el.addEventListener('click', () => {
      alert('You clicked me!')
    })
  }
})

在模板中使用该指令，如下所示：

<template>
  <div v-my-directive>Click me</div>
</template>

相关问题

export const isHasButton = (app: any) => { app.directive('has', { mounted(el: any, options: any) { if (!userStore.buttons.includes(options.value)) { el.parentNode.removeChild(el) } }, }) 有什么用

这段代码是 Vue 3 中的自定义指令，用于控制是否渲染包含指令的 DOM 元素。

具体来说，该指令是通过 Vue 3 中的 app 对象注册到全局，然后在组件中使用 v-has 指令绑定一个值，这个值可以是一个按钮名称，比如 'add'，'edit' 等。在渲染组件时，指令会判断用户是否有该按钮的权限，如果有权限则渲染该元素，否则从 DOM 中删除该元素。

这个指令的作用是在用户没有权限操作某个按钮时，将该按钮从 UI 中移除，避免用户误操作或者看到无用的操作按钮。

vue3main.js引入自定义指令

在Vue 3中，引入自定义指令的方法与Vue 2有所不同。下面是在vue3main.js中引入自定义指令的步骤：

1. 首先，创建一个自定义指令文件，比如命名为`myDirective.js`。

2. 在`myDirective.js`中，定义你的自定义指令逻辑。例如：

// myDirective.js
export default {
  mounted(el, binding) {
    // 指令逻辑...
  },
  updated(el, binding) {
    // 指令逻辑...
  },
  unmounted(el, binding) {
    // 指令逻辑...
  }
}

3. 在vue3main.js中，使用`app.directive`方法来全局注册你的自定义指令。例如：

// vue3main.js
import { createApp } from 'vue';
import myDirective from './myDirective.js';

const app = createApp(...);
app.directive('my-directive', myDirective);

app.mount('#app');

4. 现在你可以在Vue组件中使用你的自定义指令了。例如：

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

请注意，Vue 3中使用`app.directive`方法来全局注册自定义指令，与Vue 2中使用`Vue.directive`方法不同。此外，在Vue 3中，自定义指令的钩子函数名称也有所变化，分别是`mounted`、`updated`和`unmounted`。