快捷導(dǎo)航

使用use注冊(cè)Vue全局組件和全局指令的方法

更新時(shí)間：2018年03月08日 16:42:54 作者：runOnWay

下面小編就為大家分享一篇使用use注冊(cè)Vue全局組件和全局指令的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

Vue中的組件和指令分為局部組件、局部指令和全局組件、全局指令。對(duì)于注冊(cè)有一定數(shù)量的全局指令和全局組件時(shí)，官方文檔中的方法就顯得有些不夠清爽了。

全局組件

在Vue官方文檔中介紹的是使用Vue.component(tagName, options)來(lái)創(chuàng)建一個(gè)全局組件。但是這種方法是與根實(shí)例寫(xiě)在同一個(gè)文件中，如果要同時(shí)注冊(cè)多個(gè)全局組件，就會(huì)使根實(shí)例文件過(guò)重，因此使用Vue.use()來(lái)“安裝”全局組件，就顯得更輕一些。

方法：

1.新建一個(gè)plugins文件夾

2.在文件夾中創(chuàng)建放置全局組件的文件components.js

3.在components.js文件中引入所有要注冊(cè)的全局組件

4.在app.js根實(shí)例文件中，引入components.js

以eg組件為例:

components.js:

import eg from '../components/eg.vue';
export default (Vue)=>{
 Vue.component("Eg",eg);
}

app.js:

import components from './plugins/components.js';
Vue.use(components);

經(jīng)過(guò)上述編寫(xiě)后，就注冊(cè)了全局組件Eg。

在需要注冊(cè)多個(gè)全局組件的情況下，使用這種方式就顯得更加清爽！

全局指令

對(duì)于全局指令的注冊(cè)，官方文檔給出的方法是使用Vue.directive()，位置同樣是在根實(shí)例文件下，那么問(wèn)題來(lái)了，如果多個(gè)全局指令，再加上多個(gè)全局組件，那么app.js文件將變得臃腫無(wú)比。

因此，同上面的注冊(cè)全局組件方法相似，也是使用Vue.use()來(lái)“安裝”全局指令。

方法：

1.新建一個(gè)plugins文件夾

2.在文件夾中創(chuàng)建放置全局組件的文件directives.js

3.在directives.js文件中引入所有要注冊(cè)的全局指令

4.在app.js根實(shí)例文件中，引入directives.js

以v-focus指令為例：

directives.js:

export default (Vue)=>{
 Vue.directive("focus",{
  inserted:function(el){
   el.focus();
  }
 })
}

app.js

import directives from "./plugins/directives.js"
Vue.use(directives);

這樣就注冊(cè)了全局指令。

以上這篇使用use注冊(cè)Vue全局組件和全局指令的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE前端cookie簡(jiǎn)單操作
這篇文章主要為大家詳細(xì)介紹了VUE前端cookie簡(jiǎn)單操作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
Vue獲取表單數(shù)據(jù)的多種方式
這篇文章主要給大家介紹了關(guān)于Vue獲取表單數(shù)據(jù)的多種方式,在Vue中我們通常使用v-model命令綁定表單的屬性值(通常是value),獲取到的屬性值就是表單數(shù)據(jù),需要的朋友可以參考下
2023-09-09
Vue項(xiàng)目開(kāi)發(fā)常見(jiàn)問(wèn)題和解決方案總結(jié)
這篇文章主要介紹了Vue項(xiàng)目開(kāi)發(fā)常見(jiàn)問(wèn)題和解決方案總結(jié)，幫助大家更好的利用vue開(kāi)發(fā)，感興趣的朋友可以了解下
2020-09-09
Vue實(shí)現(xiàn)模糊查詢(xún)-Mysql數(shù)據(jù)庫(kù)數(shù)據(jù)
這篇文章主要介紹了基于Vue實(shí)現(xiàn)Mysql數(shù)據(jù)庫(kù)數(shù)據(jù)模糊查詢(xún),下面文章我們主要實(shí)現(xiàn)的是輸入框中輸入數(shù)據(jù)，根據(jù)輸入的結(jié)果模糊搜索數(shù)據(jù)庫(kù)對(duì)應(yīng)內(nèi)容，實(shí)現(xiàn)模糊查詢(xún)，感興趣的小伙伴可以進(jìn)入文章我們一起學(xué)習(xí)
2021-12-12
Vue鼠標(biāo)點(diǎn)擊事件和鍵盤(pán)事件舉例詳解
在Vue框架中我們經(jīng)常需要綁定各種JS事件,如"點(diǎn)擊事件"、"鼠標(biāo)移動(dòng)事件"、"鍵盤(pán)事件"等等,這篇文章主要給大家介紹了關(guān)于Vue鼠標(biāo)點(diǎn)擊事件和鍵盤(pán)事件的相關(guān)資料,需要的朋友可以參考下
2024-01-01
vue中子組件如何間接修改父組件傳遞過(guò)來(lái)的值問(wèn)題
這篇文章主要介紹了vue中子組件如何間接修改父組件傳遞過(guò)來(lái)的值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
關(guān)于Vue3中defineProps用法圖文詳解
在vue3中組件傳參有很多種方式,和v2大差不差,但是有的地方還是有很多的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于Vue3中defineProps用法的相關(guān)資料,需要的朋友可以參考下
2022-11-11
Vue的生命周期操作示例
這篇文章主要介紹了Vue的生命周期操作,結(jié)合實(shí)例形式分析了vue生命周期中各個(gè)函數(shù)的運(yùn)行步驟,需要的朋友可以參考下
2019-09-09
element-ui中頁(yè)面縮放時(shí)table表格內(nèi)容錯(cuò)位的解決
這篇文章主要介紹了element-ui中頁(yè)面縮放時(shí)table表格內(nèi)容錯(cuò)位的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue觸發(fā)式全局組件構(gòu)建的方法
這篇文章主要介紹了Vue觸發(fā)式全局組件構(gòu)建的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11