前言
Vue 3 中自定义指令(Custom Directives)的功能依然强大,但API相较于Vue 2有所改变,更加强调Composition API的使用方式。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
一、如何在Vue 3中创建和使用自定义指令
下面是如何在Vue 3中创建和使用自定义指令的简要指南,官方的小例子:
<script setup>
// 在模板中启用 v-focus
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>
很简单一句话就能用了,我刚开始是没看懂的,这定义了一个函数怎么就能当指令用?测试一下,居然可行。
在
学过vue2的都知道指令是需要注册的,在没有使用
//局部注册
export default {
setup() {
/*...*/
},
directives: {
// 在模板中启用 v-focus
focus: {
/* ... */
}
}
}
// 注册一个全局自定义指令 `v-focus`,该指令用于输入框自动获取焦点
Vue.directive('focus', {
// 当绑定元素插入到DOM中时
inserted: function (el) {
// 聚焦元素
el.focus();
}
})
简化:
对于自定义指令来说,一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为,除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令,如下所示:
<div v-color="color"></div>
app.directive('color', (el, binding) => {
// 这会在 `mounted` 和 `updated` 时都调用
el.style.color = binding.value
})
总结
这样,简单的自定义指令就已经学会了。
昨日种种,皆成今我,切莫思量,更莫哀。从今往后,怎么收获,怎么栽。