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);

這樣就注冊了全局指令。

以上這篇使用use注冊Vue全局組件和全局指令的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。