vue3自定义指令
我们可以定义类似于v-if等相同功能的指令 这里以获取input输入框自动获取焦点功能为例,提供两种方式
一,定义局部指令
在optionsAPI中定义
我们把他定义为v-focus 并应用到input上
<template>
<div class="app">
<input type="text" v-focus />
</div>
</template>
我们需要使用directives,他需要传入对象类型,在里面定义我们想要设置的功能,里面有自定义指令的生命周期函数,和vue2中的生命周期类似,这里使用mounted(),他在应用元素被挂载之后执行,并且有el参数,用于接收当前元素
export default {
directives: {
focus: {
mounted(el) {
el?.focus();
},
},
},
};
在compositionAPI中定义
在vue3.2版本的setup语法糖中使用时,我们需要定义一个函数,并且这个函数必须用v开头,其中的生命周期和optionsAPI中的定义方法一样的
<script setup>
const vFocus = {
mounted(el) {
el?.focus();
},
};
</script>
指令的生命周期
一个指令定义的对象,Vue提供了如下的几个钩子函数:
created:在绑定元素的 attribute 或事件监听器被应用之前调用;
beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用;
mounted:在绑定元素的父组件被挂载后调用;
beforeUpdate:在更新包含组件的 VNode 之前调用;
updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用;
beforeUnmount:在卸载绑定元素的父组件之前调用;
unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次;
指令的参数和修饰符
如果我们指令需要接受一些参数或者修饰符应该如何操作呢?
info是参数的名称;
aaa-bbb是修饰符的名称;
后面是传入的具体的值;
<button v-hello:info.aaa.bbb="{name:'kobe',age:30}">{{counter}}</button>
在我们的生命周期中,我们可以通过 bindings 获取到对应的内容
const vHello= {
mounted(el, bindings) {
console.log(bindings);
},
};
二、定义全局指令
定义全局指令需要app的directive方法,可以在任意组件中被使用
app.directive('unit', {
mounted(el, bindings) {
console.log(el, bindings)
},
});
使用app.directive(),第一个参数是要自定义的指令名,第二个参数是一个对象,对象内的写法和局部定义是一样的
优化代码
我们可以把它从main.js中提取到一个hello.js文件中,在新建一个index.js文件,里面负责导出所有的自定义指令
export default function directiveUnit(app) {
app.directive('hello', {
mounted(el, bindings) {
console.log(el, bindings)
},
});
}
import directiveHello from './hello';
export default function directives(app) {
directiveHello(app);
}
最后在main.js中引入这个index.js,使用app.use()
import { createApp } from 'vue';
import App from './App.vue';
import directives from './01_自定义指令/directives';
const app = createApp(App)
app.use(directives).mount('#app');
这样可以使main.js中的代码变得简洁