《图解Vue3.0》- 第6节 模板语法 - 自定义指令

简介

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
API地址：https://vue3js.cn/docs/zh/api/application-api.html#directive

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。在这里你可以做一次性的初始化设置。
• mounted：在挂载绑定元素的父组件时调用。
• beforeUpdate：在更新包含组件的 VNode 之前调用。
• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
• beforeUnmount：在卸载绑定元素的父组件之前调用
• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

基本和vue组件的生命周期类似，只是没有create的阶段，直接进入挂载阶段，生命周期如下

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmount(vue2.0是beforeDestroy)
• unmounted(vue2.0是destroyed)

使用方式

自定义指令可以全局注册也可以局部注册。全局注册就是挂载到createApp()的结果上，局部注册就是在组件内提供了directives属性，在这里面进行注册。

写一个input的自动聚焦的示例，代码如下：

局部注册

全局注冊

注意这里的挂载顺序，最后写app.mount(),不然会报错。
main.js

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

const app = createApp(App);

// 定义v-focus指令
app.directive('focus', {
    mounted(el) {
        el.focus();
    }
});

app.mount('#app');

example.vue

指令参数

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。
如果指令参数有多个，也可以传一个对象。

就拿刚刚的v-focus示例来说，如果我们需要将其边框的宽度或颜色修改掉，该如何做呢？

示例

main.js

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

const app = createApp(App);

// 定义v-focus指令
app.directive('focus', {
    mounted(el, binding) {
        el.focus();


        if (typeof binding.value !== 'object') {
            el.style.borderColor = binding.value;
        } else {
            el.style.borderColor = binding.value.color;
            el.style.borderWidth = binding.value.borderWidth;
        }
        
    }
});

app.mount('#app');

App.vue

由于这里focus只能对一个input起作用，所以反应在了最后一个input上面。

函数简写

在很多时候，你可能想在 mounted 和 updated 时触发相同行为，而不关心其它的钩子。比如这样写：

// 定义v-focus指令
app.directive('focus',(el, binding)=> {
    el.focus();
    if (typeof binding.value !== 'object') {
        el.style.borderColor = binding.value;
    } else {
        el.style.borderColor = binding.value.color;
        el.style.borderWidth = binding.value.borderWidth;
    }
});

也就是app.directive提供了两种入参方式，一种是第二参数写成对象，里面包含各个生命周期的钩子函数，另外一个简写就是第二个参数直接写成函数，只在mounted和updated这两个常用的钩子函数触发条件下执行。