use怎麼註冊Vue的全域元件

這次帶給大家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);

這樣就註冊了全域指令。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue2.0axios跨域和渲染如何使用

JS怎麼實現剔除全部的重複字符

#

以上是use怎麼註冊Vue的全域元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！