Vue中的自定义指令

Youky ... 2021-10-11

About 1 min

# Vue中的自定义指令

# 自定义指令是什么

除了常用的预设指令（如v-if、v-for等），Vue允许用户自定义指令，实现特定功能。

# 定义方法

自定义指令分为两种，全局的和组件内的。

全局指令通过Vue.directive定义，组件内则通过directive选项传入一个对象来定义。

如一个经典的例子，定义一个输入框自动聚焦的v-focus指令

// 全局
Vue.directive('focus',{
    // 当被绑定元素插入DOM时执行回调
    inserted: function(el){
        el.focus();
    }
})

// 组件内
{
    directive:{
        focus:{
            inserted:function(el){
                el.focus();
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在标签中即可使用

<input v-focus />

自定义指令一共提供了五个钩子：

bind：只在首次绑定到元素时执行
inserted：被绑定元素插入父节点时调用
update：被绑定元素的VNode更新时
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用

通常，我们期望在绑定和更新时触发相同的行为，而不关心其它钩子，此时可以进行简写：

Vue.directive('focus', function(el){
    el.focus();
})

1
2
3

# 传入参数

使用指令时，可能使用到的参数可能有两种，例如对于v-bind:foo="1+2"

绑定值：绑定给变量的值，上例中为3
参数：进行绑定的变量，上例中为foo

绑定值和参数都可以通过回调函数的第二个参数binding对象获得

# 应用场景