vue使用use自定義全局元件和指令

使用use注冊全局的元件和全局指令

Vue中的元件和指令分為局部元件、局部指令和全局元件、全局指令。對于注冊有一定數量的全局指令和全局元件時，官方文檔中的方法就顯得有些不夠輕便了。
           

1. 全局元件

   在Vue官方文檔中介紹的是使用Vue.component(tagName, options)來建立一個全局元件。但是這種方法是與根執行個體寫在同一個檔案中，如果要同時注冊多個全局元件，就會使根執行個體檔案過重，是以使用Vue.use()來“安裝”全局元件，就顯得更輕一些。

   我們在前面學習到是用别人的元件：Vue.use(VueRouter)、Vue.use(Mint)等等。其實使用的這些都是全劇元件，這裡我們就來講解一下怎麼樣定義一個全局元件,并解釋vue.use()的原理，而我們再用Axios做互動，則不能使用Vue.use(Axios)，因為Axios沒有install

   方法一：

   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。

方法二：

自定義一個全局Loading元件，并使用：

總結目錄：

|-components

　　|-loading

　　　　|-index.js 導出元件，并且install

　　　　|-loading.vue 定義Loading元件，這裡面基本的style ,script中之前講的methods,data方法都可以使用

index.js中的代碼：

import LoadingComponent from ‘./loading.vue’

　　const Loading={

　　　　install:function(Vue){ //核心部分，在我們使用Vue.use()時，自動調用的是install，而install導出的必須是的元件

　　　　Vue.component(‘loading’,LoadingComponent);

　　}

};

export default Loading;

main.js中要使用：

　　import loading from ‘./components/loading’

　　Vue.use(loading); //調用的是install裡面的元件

在需要注冊多個全局元件的情況下，使用這種方式就顯得更加清爽。

1. 全局指令

   對于全局指令的注冊，官方文檔給出的方法是使用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);
           

這樣就注冊了全局指令。