前言
咱们在真实项目开发中,其实有很多指令都是通用的。我们绝对不可能去每个页面都定义一次,这样不仅写起来困难,维护起来更是困难,你想一下,假设稍微变点逻辑,你就需要翻阅好几个文件去改。
其实用法和局部指令基本相同,只不过定义的位置不同了而已。
回忆 Vue2
一般情况下,我们都会在项目根目录,创建一个
directive
文件夹,里面再建立一个directive.js
文件,用来存放我们的全局自定义指令,这样做的好处呢,就是把自定义指令 聚集在一起,方便管理。
先来用 Vue2 实现定义全局指令,如下代码所示:
directive.js:
// 第一步,引入vue
import Vue from 'vue'
// 第二步,写具体指令
const getFocus = Vue.directive('getFocus', {
...
})
// 其他 N 个指令
// const xx = ...
// 第三步,导出
export { getFocus }
main.js:
// 引入自定义指令
import { getFocus } from './directive.js'
// 注册指令(注意必须import vue, 因为咱们用到了人Vue实例)
Vue.prototype.$getFocus = getFocus
这一套操作下来,便可以在全局进行使用。
<input @click="go" v-getFocus />
切入 Vue3
说完了 Vue2 中如何搞,咱们说说 Vue3 中怎么实现。
在项目根目录,创建一个 directive
文件夹,里面再建立一个 directive.js
文件。
// 另外app参数是啥?一会你就知道了
// 创建一个 directive 变量,用来聚集所有自定义指令
export const directive = (app) => {
app.directive('getFocus', (el) => {
// 这将被作为 `mounted` 和 `updated` 调用
console.log(`这瓜保熟吗?${el}`)
})
// 更多指令...
// app.directive('xxx', (el) => {})
}
第二步呢,打开 main.js
入口文件,进行全局注册。
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
const app = createApp(App)
// 引入全局指令
import { directive } from './directive/directive'
// 全局注册
// 注意:要放在 const app = createApp(App) 之后
// 至于为啥?我想说就连刘海柱都知道信不?
directive(app)
app.mount('#app')
大功告成,我们来测试使用一下。
<input v-getFocus />
SEO
vue3.js官方文档,vue3全局指令,vue3全局指令官方文档,vue3全局自定义指令,Vue3全局指令,Vue3.x教程-Vue3,Vue3自定义指令,vue3中全局和局部自定义指令怎样实现,vue3自定义全局指令,vue3封装全局指令,vue3 学习笔记 (三)——vue3 自定义指令,Vue3 中自定义指令,Vue全局指令:如何添加全局指令,Vue3-巧用指令,Vue自定义指令的使用详细介绍,Vue3 - 全局指令(详细教程)。