vue3的自定义指令详解
一、认识自定义指令
在Vue的模板语法中我们学习过各种各样的指令:v-show、v-for、v-model等等,除了使用这些指令之外,Vue也允许我们来自定义自己的指令 |
---|
- 注意:在Vue中,代码的复用和抽象
主要还是通过组件
- 通常在某些情况下,你
需要对DOM元素进行底层操作
,这个时候就会用到自定义指令
自定义指令分为两种
- 自定义
局部指令
:组件中通过directives
选项,只能在当前
组件中使用 - 自定义
全局指令
:app的 directive 方法,可以在任意
组件中被使用
比如我们来做一个非常简单的案例:当某个元素挂载完成后可以自定获取焦点
- 实现方式一:如果我们使用
默认的实现方式
<template>
<div>
<input type="text" ref="input" />
</div>
</template>
<script>
import {
ref, onMounted } from "vue";
export default {
setup () {
const input = ref(null);
onMounted(() => {
input.value.focus();
})
return {
input
}
}
}
</script>
<style scoped>
</style>
- 实现方式二:自定义一个
v-focus 的局部指令
<template>
<div>
<input type="text" v-focus>
</div>
</template>
<script>
export default {
// 局部指令
directives: {
focus: {
mounted(el, bindings, vnode, preVnode) {
console.log("focus mounted");
el.focus(