Vue3实战笔记（62）—Vue3自定义指令入门：10分钟学会基础用法

本文主要是介绍Vue3实战笔记（62）—Vue3自定义指令入门：10分钟学会基础用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

---

前言

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-focusfocus: {/* ... */}}
}

// 注册一个全局自定义指令 `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
})

---

总结

这样，简单的自定义指令就已经学会了。

昨日种种，皆成今我，切莫思量，更莫哀。从今往后，怎么收获，怎么栽。

这篇关于Vue3实战笔记（62）—Vue3自定义指令入门：10分钟学会基础用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---