Vue中建立全局引用或者全局命令的方法
如何在Vue中建立全局引用或者全局命令，具體內(nèi)容如下
1 一般在vue中，有很多vue組件，這些組件每個都是一個文件。都可能需要引用到相同模塊(或者插件)。我們不想每個文件都import 一次模塊。
如果是基于vue.js編寫的插件我們可以用 Vue.use(...)
main.js
2 但是如果想添加一個全局命令，同時又讓每個vue的文件都能用到怎么辦？
第一步：最好建立一個全局的命令文件例如：directive/directive.js
第二步：利用Vue.directive()建立一個全局命令，并將它暴露出來，例如一個focus 讓表單自動聚焦
directive.js
第三部步：在main.js（入口JS文件）中將它引入，可以省略文件后綴
main.js
這樣任何一個Vue文件只要這樣v-focus(命令名)，就可以很方便的用到了
3 Vue.directive() 的命令一般都是自動運(yùn)行的或者說初始化等等觸發(fā)的，并不能用于異步事件，怎么辦？
于是我們可以用到'mixins'混合命令，你最好建立一個專門的文件夾用于存放混合命令，例如：
mixins.js
比如saveScrollPosition （不是vue中的saveScrollPosition）可以每次在路由跳轉(zhuǎn)之間保存住瀏覽位置信息
注意：vue2.0 中 路由跳轉(zhuǎn)之間會自動保存位置信息 但是有Bug（位置信息之間會相互干擾）。
所以我們從新寫一個saveScrollPosition暴露出去后，在你需要的頁面中混入
這樣就會很方便。
4 如果你需要應(yīng)用一個插件，同時他并不是基于vue.js的插件命令編寫的，那你可以將它賦予Vue的原型上
例如：我想全局引用axios，我們可以這樣
main.js
然后this.$http.get(url) 等等
xxx.vue
5 將需要的變量掛在到window對象上
例如：第三方庫Lodash.js,moment.js等等
main.js
xxx.vue
注意：這種方式不適合服務(wù)端渲染，服務(wù)端并沒有window對象
強(qiáng)調(diào)一點(diǎn)：以上所有的引入都必須通過入口JS文件去引入，這樣才能適用于全局
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+vite使用環(huán)境變量.env的一些配置情況詳細(xì)說明
開發(fā)中經(jīng)常會使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關(guān)于vue3+vite使用環(huán)境變量.env的一些配置情況說明的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue3?實(shí)現(xiàn)右鍵菜單編輯復(fù)制粘貼功能
在瀏覽器中,Vue3編輯器自帶默認(rèn)右鍵菜單,然而,在Electron桌面應(yīng)用中,這一功能需自行編寫代碼實(shí)現(xiàn),本文詳細(xì)介紹了如何在Vue3中手動實(shí)現(xiàn)右鍵菜單的編輯、復(fù)制、粘貼功能,并提供了代碼示例,更多細(xì)節(jié)和相關(guān)教程可參考腳本之家的其他文章2024-10-10
解決vue打包后刷新頁面報(bào)錯：Unexpected token <
這篇文章主要介紹了解決vue打包后刷新頁面報(bào)錯：Unexpected token <相關(guān)知識點(diǎn)，需要的朋友們參考下。2019-08-08
隨著Vue的使用越來越多,對Vue的其他知識點(diǎn)也開始逐漸多了解一點(diǎn),這次做頁面上的計(jì)算,用了Watch偵聽器,這篇文章主要給大家介紹了關(guān)于Vue中偵聽器基本用法的相關(guān)資料,需要的朋友可以參考下2021-08-08
Vue實(shí)現(xiàn)可復(fù)用輪播組件的方法
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)可復(fù)用輪播組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue如何動態(tài)獲取當(dāng)前時間問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
無論是開發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開源軟件包。本文主要介紹了35個最好用的Vue開源庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
electron + vue項(xiàng)目實(shí)現(xiàn)打印小票功能及實(shí)現(xiàn)代碼
這篇文章主要介紹了electron + vue項(xiàng)目實(shí)現(xiàn)打印小票功能,需要的朋友可以參考下2018-11-11
vue3使用vuex實(shí)現(xiàn)頁面實(shí)時更新數(shù)據(jù)實(shí)例教程(setup)
在前端開發(fā)中往往會遇到頁面需要實(shí)時刷新數(shù)據(jù)的情況,給用戶最新的數(shù)據(jù)展示,這篇文章主要給大家介紹了關(guān)于vue3使用vuex實(shí)現(xiàn)頁面實(shí)時更新數(shù)據(jù)(setup)的相關(guān)資料,需要的朋友可以參考下2022-09-09
詳解element-ui 組件el-autocomplete使用踩坑記錄
最近使用了el-autocomplete組件，本文主要介紹了element-ui 組件el-autocomplete使用踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03