這次帶給大家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中文網其它相關文章！
推薦閱讀：
#以上是use怎麼註冊Vue的全域元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
