赞
踩
在前端项目中,有很多需求是需要在多页面进行逻辑处理,通常我们所需要的功能可以通过DOM操作来实现,或者多处功能一致,我们就可以使用自定义指令。
在vue2中的自定义指令指令注册的方法是
// v-focus.js
import vue from 'vue'
Vue.directive('focus', (el) => {
el.focus()
})
// main.js
import './utils/v-focus'
但是在vue3中注册机制已经改变,如果你还是沿用原来的注册方法,指令将未被注册并且抛出异常
废话不多说,让我们来看看vue3是怎么自定义指令
首先官方文档已经说明了如何在setup
中以及非setup
使用方法
// setup
const vFocus = {
mounted: (el) => el.focus()
}
// default
export default {
setup() {
},
directives: { // 在模板中启用 v-focus focus: { /* ... */ } }
}
// template
<template> <input v-focus /> </template>
在接下来的全局注册到应用层级,文档就并不是非常的清晰了。
首先要知道,全局注册时需要挂在到根组件#App
上,不同于vue2不需要被use使用,vue3的机制是你的指令必须要被注册成方法的,这样你才能全局使用到自定义指令,细看可以知道,use
接收一个方法,方法返回参数携带app<HostElement>
,我们就可以拿到app去注册全局指令了。
use(plugin: Plugin_2, ...options: any[]): CompatVue;
单文件注册
// v-focus.ts import type { App } from 'vue' const install = (Vue: App) => { Vue.directive('auto-scroll', (el) => { el.focus() }) } export default install // main.ts import VFocus from './utils/v-focus' createApp(App) .use(VFocus) .mount('#app')
多文件注册
// index.ts import type { App } from 'vue' import vFocus from './v-focus' const directives = { 'v-focus': vFocus, 'XXX': XXX } const install = (Vue: App) => { Obeject.keys(directives).forEach((key) => { Vue.directive(key, directives[key]) }) } export default install // main.ts import Directives from './utils' createApp(App) .use(Directives) .mount('#app')
最后就可以全局使用了
<template> <input v-focus /> </template>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。