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