Vue3中自定义指令介绍及用法

自定义指令是什么

在开发Vue项目时，大多数都会使用到Vue内置的一些指令，如v-model、v-if、v-show等，这些呢，就叫做指令，而我们自己呢也可以随意创建指令，就叫做自定义指令！

自定义指令钩子函数的参数

● el：指令所绑定的元素，可以直接操作DOM。 ● binding：是一个对象，包含该指令的所有信息。

binding 包含的属性具体的分别为：

● arg自定义指令的参数名。

● value自定义指令绑定的值。

● oldValue指令绑定的前一个值。

● dir被执行的钩子函数

● modifiers：一个包含修饰符的对象。

如何创建自定义指令

简单来说，一般分为两种，局部指令和全局指令，任何以v开头的驼峰式命名的变量都可以被创建为一个自定义指令，然后在模板中使用，下面示例：

1. 在局部创建使用：修改颜色的指令

<template>
    <div>
        // 这里使用指令
        <h2 v-color="'#f00'">这是改变的内容</h2>
    </div>
</template>
    
<script setup lang='ts'>
    const vColor = {
        mounted(el: any, binding: any) {
            el.style.color = binding.value;
        },
    }
</script>

• 效果

1. 在全局创建：main.js文件内创建,这样所有组件内都可以使用该指令

// main.js 文件
import '../src/assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

// 定义的指令
app.directive('color', {
    mounted(el, binding) {
        el.style.color = binding.value
    }
})

app.use(router)
app.mount('#app')

<template>
    <div>
        // 直接在任意组件中使用即可，无需引入
        <h2 v-color="'#00f'">全局改变的内容</h2>
    </div>
</template>

效果：

自定义指令的七个生命周期和组件的生命周期类似

const myDirective = { // 在绑定元素的 attribute 前 // 或事件监听器应用前调用 
    created(el, binding, vnode, prevVnode) {
        // 下面会介绍各个参数的细节 
    }, // 在元素被插入到 DOM 前调用 
    beforeMount(el, binding, vnode, prevVnode) {
    
    }, // 在绑定元素的父组件 // 及他自己的所有子节点都挂载完成后调用 
    mounted(el, binding, vnode, prevVnode) {
    
    }, // 绑定元素的父组件更新前调用 
    beforeUpdate(el, binding, vnode, prevVnode) {
    
    }, // 在绑定元素的父组件 // 及他自己的所有子节点都更新后调用 
    updated(el, binding, vnode, prevVnode) {
    
    }, // 绑定元素的父组件卸载前调用 
    beforeUnmount(el, binding, vnode, prevVnode) {
    
    }, // 绑定元素的父组件卸载后调用 
    unmounted(el, binding, vnode, prevVnode) {
    
    } 
}

> _ < 每日一签

美好的一天，上帝不会就这样给你，需要自己去创造。