使用use注冊Vue全局組件和全局指令的方法
Vue中的組件和指令分為局部組件、局部指令和全局組件、全局指令。對于注冊有一定數(shù)量的全局指令和全局組件時，官方文檔中的方法就顯得有些不夠清爽了。
全局組件
在Vue官方文檔中介紹的是使用Vue.component(tagName, options)來創(chuàng)建一個全局組件。但是這種方法是與根實例寫在同一個文件中，如果要同時注冊多個全局組件，就會使根實例文件過重，因此使用Vue.use()來“安裝”全局組件，就顯得更輕一些。
方法：
1.新建一個plugins文件夾
2.在文件夾中創(chuàng)建放置全局組件的文件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);
經(jīng)過上述編寫后，就注冊了全局組件Eg。
在需要注冊多個全局組件的情況下，使用這種方式就顯得更加清爽！
全局指令
對于全局指令的注冊，官方文檔給出的方法是使用Vue.directive()，位置同樣是在根實例文件下，那么問題來了，如果多個全局指令，再加上多個全局組件，那么app.js文件將變得臃腫無比。
因此，同上面的注冊全局組件方法相似，也是使用Vue.use()來“安裝”全局指令。
方法：
1.新建一個plugins文件夾
2.在文件夾中創(chuàng)建放置全局組件的文件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全局組件和全局指令的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了VUE前端cookie簡單操作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要給大家介紹了關(guān)于Vue獲取表單數(shù)據(jù)的多種方式,在Vue中我們通常使用v-model命令綁定表單的屬性值(通常是value),獲取到的屬性值就是表單數(shù)據(jù),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue項目開發(fā)常見問題和解決方案總結(jié)，幫助大家更好的利用vue開發(fā)，感興趣的朋友可以了解下2020-09-09
Vue實現(xiàn)模糊查詢-Mysql數(shù)據(jù)庫數(shù)據(jù)
這篇文章主要介紹了基于Vue實現(xiàn)Mysql數(shù)據(jù)庫數(shù)據(jù)模糊查詢,下面文章我們主要實現(xiàn)的是輸入框中輸入數(shù)據(jù)，根據(jù)輸入的結(jié)果模糊搜索數(shù)據(jù)庫對應(yīng)內(nèi)容，實現(xiàn)模糊查詢，感興趣的小伙伴可以進入文章我們一起學(xué)習(xí)2021-12-12
在Vue框架中我們經(jīng)常需要綁定各種JS事件,如"點擊事件"、"鼠標(biāo)移動事件"、"鍵盤事件"等等,這篇文章主要給大家介紹了關(guān)于Vue鼠標(biāo)點擊事件和鍵盤事件的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue中子組件如何間接修改父組件傳遞過來的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
關(guān)于Vue3中defineProps用法圖文詳解
在vue3中組件傳參有很多種方式,和v2大差不差,但是有的地方還是有很多的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于Vue3中defineProps用法的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue的生命周期操作,結(jié)合實例形式分析了vue生命周期中各個函數(shù)的運行步驟,需要的朋友可以參考下2019-09-09
element-ui中頁面縮放時table表格內(nèi)容錯位的解決
這篇文章主要介紹了element-ui中頁面縮放時table表格內(nèi)容錯位的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue觸發(fā)式全局組件構(gòu)建的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11