使用use註冊Vue全域元件和全域指令的方法

下面我就為大家分享一篇使用use註冊Vue全域元件和全域指令的方法，具有很好的參考價值，希望對大家有幫助。

Vue中的元件和指令分為局部元件、局部指令和全域元件、全域指令。對於註冊有一定數量的全域指令和全域元件時，官方文件中的方法就顯得有些不夠清爽了。

全域元件

在Vue官方文件中介紹的是使用Vue.component(tagName, options)來建立一個全域元件。但是這種方法是與根實例寫在同一個檔案中，如果要同時註冊多個全域元件，就會使根實例檔案過重，因此使用Vue.use()來「安裝」全域元件，就顯得更輕一些。

方法：

1.新一個plugins資料夾

2.在資料夾中建立放置全域元件的檔案components.js

3.在components.js檔案中引入所有要註冊的全域元件

4.在app.js根實例檔案中，引入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);

經過上述編寫後，就註冊了全域元件Eg。

在需要註冊多個全域元件的情況下，使用這種方式就顯得更加清爽！

全域指令

對於全域指令的註冊，官方文件給出的方法是使用Vue.directive()，位置同樣是在根實例檔案下，那麼問題來了，如果多個全域指令，再加上多個全域元件，那麼app.js檔案就會變得臃腫無比。

因此，同上面的註冊全域元件方法相似，也是使用Vue.use()來「安裝」全域指令。

方法：

1.新一個plugins資料夾

2.在資料夾中建立放置全域元件的檔案directives.js

3.在directives.js檔案中引入所有要註冊的全域指令

4.在app.js根實例檔案中，引入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);

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

jQuery ajax讀取json資料並依照價格排序範例

vue資料控制視圖原始碼解析

#vue 開發一個按鈕元件的範例程式碼

#

以上是使用use註冊Vue全域元件和全域指令的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！