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

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

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

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

全局組件

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

方法：

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)過上述編寫后，就注冊(cè)了全局組件Eg。

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

全局指令

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

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

方法：

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中選項(xiàng)卡點(diǎn)擊切換且能滑動(dòng)切換功能的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了vue中選項(xiàng)卡點(diǎn)擊切換且能滑動(dòng)切換功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下
2018-11-11
解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題
這篇文章主要介紹了解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題，本文給大家介紹的非常詳細(xì)，具有一定的參考解決價(jià)值,需要的朋友可以參考下
2019-07-07
Vue狀態(tài)管理庫Pinia詳細(xì)介紹
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是 vue3 新的狀態(tài)管理工具，簡(jiǎn)單來說相當(dāng)于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以參考下
2022-08-08
vue開發(fā)中后臺(tái)系統(tǒng)復(fù)雜表單優(yōu)化技巧
這篇文章主要為大家介紹了vue開發(fā)中后臺(tái)系統(tǒng)復(fù)雜表單的優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue運(yùn)用transition實(shí)現(xiàn)過渡動(dòng)畫
vue的過渡動(dòng)畫，主要是transition標(biāo)簽的使用，配合css動(dòng)畫實(shí)現(xiàn)的。接下來通過本文給大家分享Vue運(yùn)用transition實(shí)現(xiàn)過渡動(dòng)畫效果，感興趣的朋友一起看看吧
2019-05-05
詳解Vue中的自定義渲染器和異步渲染
這篇文章主要為大家詳細(xì)介紹了Vue中的自定義渲染器和異步渲染的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
vue實(shí)現(xiàn)自定義日期組件功能的實(shí)例代碼
這篇文章主要介紹了vue自定義日期組件的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-11-11
Vue實(shí)現(xiàn)開關(guān)按鈕拖拽效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)開關(guān)按鈕拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
Vue2.x通用條件搜索組件的封裝及應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了Vue2.x通用條件搜索組件的封裝及應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
vue從倉庫state中取不到數(shù)據(jù)的問題
這篇文章主要介紹了vue從倉庫state中取不到數(shù)據(jù)的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04