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);
這樣就註冊了全局指令