vue3的自定义指令怎么用vue3的全局自定义指令怎么写。自定义指令的钩子函数。简单易懂

一、先看看Vue2自定义指令的钩子

• bind：当指令绑定在对应元素时触发。只会触发一次。

• inserted：当对应元素被插入到 DOM 的父元素时触发。

• update：当元素更新时，这个钩子会被触发（此时元素的后代元素还没有触发更新）。

• componentUpdated：当整个组件（包括子组件）完成更新后，这个钩子触发。

• unbind：当指令被从元素上移除时，这个钩子会被触发。也只触发一次。

二、在Vue3 中，官方为了更有助于代码的可读性和风格统一，把自定义指令的钩子名称改的更像是组件生命周期，尽管他们是两回事

• bind => beforeMount

• inserted => mounted

• beforeUpdate: 新的钩子，会在元素自身更新前触发

• update => 移除！

• componentUpdated => updated

• beforeUnmount: 新的钩子，当元素自身被卸载前触发

• unbind => unmounted

三、自定义指令中的生命周期钩子函数

指令定义对象可以提供如下几个钩子函数（按需引入）

• created ：绑定元素属性或事件监听器被应用之前调用。该指令需要附加需要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。

• beforeMounted ：当指令第一次绑定到元素并且在挂载父组件之前执行。

• mounted ：绑定元素的父组件被挂载之后调用。

• beforeUpdate ：在更新包含组件的 VNode 之前调用。

• updated ：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

• beforeUnmounted ：在卸载绑定元素的父组件之前调用

• unmounted ：当指令与元素解除绑定且父组件已卸载时，只调用一次。

一、注册一个全局的自定义指令，创建一个文件夹 busDirective > index.js

export default {
    install(app) { 
        app.directive('color', { // color 是指令的名字
            created(el, binding) { // el 是当前绑定的元素，binding 是一个对象
                console.log(binding.value);
                el.style.backgroundColor = binding.value // binding.value 就是指令绑定的内容，也是等号里面的值
            },
            updated(el, binding) {
                el.style.backgroundColor = binding.value
            },
        })
    }
} 

1、 钩子函数被赋予了以下参数： el：指令所绑定的元素，可以直接操作DOM。 binding：是一个对象，包含该指令的所有信息。 binding 包含的属性具体的分别为：

2、 arg 自定义指令的参数名。 value 自定义指令绑定的值。 oldValue 指令绑定的前一个值。 dir 被执行的钩子函数 modifiers：一个包含修饰符的对象。

二、在 min.js 中使用

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 + import directive from './busDirective/index'
createApp(App).use(store).use(router).use(directive).mount('#app') // use使用

三、然后搭配 vuex 的state v-color 就可以改指定元素的颜色

<template>
  <div>
    <div v-color="'red'">全局指令 可以配合全局state数据来灵活使用</div>
  </div>
</template>
​
<script>
export default {
  setup() {},
};
</script>
<style scoped>
div {
  width: 200px;
  height: 200px;
}
</style>

一、vue3 组件里的自定义指令书写格式

<template>
  <div>
    <div v-color="'要传递的值'">vue3组件级自定义指定</div>
  </div>
</template>
​
<script>
//自定义指令动态参数
const autoFocus = {
  color: {
    beforeMount(el, binding) {
      console.log("el", el);
      el.style.backgroundColor = "pink";
      console.log(binding.value); // 要传递的值
    },
  },
};
export default {
  directives: autoFocus,
  setup() {},
};
</script>
<style scoped>
div {
  width: 200px;
  height: 200px;
}
</style>