Vue組件注冊、自定義全局函數、全局指令注冊

一、組件注冊

1、局部注冊

局部注冊我們應該是最熟悉的，比如我們不想單個組件容量太大，所以想提取部分模塊，通過父子組件傳參的形式來連接

// 子組件 child.vue
<template>
    <div>
        <h1>{{ title }}</ht>
    </div>
</template>

<script>
    export default {
        porps: {
            title:{ type: String, default: '子組件' }
        },
        data() {

        }
    }
</script>

// 父組件
<template>
    <child :title="_title></child>
</tempalte>

<script>
    import Child from './child.vue'

    export default {
        name: 'father',
        component: { // 局部注冊組件 child, },
        data() {
            return {
                _title: '我的子組件'
            }
        }
    }
</script>

 

2、全局注冊

我們做項目的過程中經常提取或者封裝公共組件，那么這些公共組件怎么全局注冊，以便所有組件中直接使用？

注：全局注冊必須在入口文件注冊，如 main.js

2.1、單個組件全局注冊

Vue.component('定義的組件名稱'，'引入的組件')
// 第一個參數是以后其他組件直接使用的名稱，官方建議全小寫加橫線，如 my-component-name
// 第二個參數是 import 引入的組件

// 入口文件，如 main.js
import Vue from 'vue'
import MyCart from './my_cart.vue'
Vue.component('my-cart', MyCart);

// 其他組件
<template>
    <div>
        <p>購物頁面</p>
        <my-cart></my-cart>  // 可自定義傳參 :data-cart="dataCart"
    </div>
</template>

2.2、多個組件全局注冊，即模擬第三方UI庫的注冊模式

// 建一個收集組件的js文件，如 components_index.js
import ComponentA from './components/compnentA.vue'
import ComponentB from './components/componentB.vue'

const components = [
    ComponentA,
    ComponentB
];

// Vue.use 必須保證注冊的組件有 install 函數
const install = (vue) => {  
    components.map(component => {
　　　　// 注意這里的 component.name 是每個組件中export default自定義的 name，這個 name 可以在項目vue組件中直接使用
       Vue.component(component.name, component); 
    });
};

// 注：導出，供 Vue.use注冊，其實 Veu.use()是調用Vue.js中的install函數，然后將我們暴露的install執行，真正的注冊還是 Vue.component()
// 第三方庫基本以這種方式注冊他們的各個組件，直接使用 Vue.use(element)，其內部已經有 instatll => Vue.component()
export default {
    install,   // install 必須暴露，供vue去調用，檢測並注冊組件
    ComponentA,
    ComponentB 
}

// 入口文件，如 main.js
import Vue from 'vue'
import All_ui_unit from './components/components_index.js';

Vue.use(All_ui_unit );

 

二、自定義全局函數，類似全局組件注冊的方式

1、在 main.js 使用 Vue.prototype

import Vue from 'vue';

Vue.prototype.getToken = function () {
  ...  
}

// 所有組件中調用該方法
this.getToken();

2、批量定義全局函數

// 自定義函數集合 utils.js
exports.install = function (Vue, options) {
  Vue.prototype.getToken = function() {
        ...
  },
  Vue.protoType.setToken = function() {
        ...
  }   
}


// main.js
import Vue form 'vue'
import utils from './utils.js'

Vue.use(utils);

 

三、自定義指令全局注冊

1、全局注冊

// 在入口文件 main.js
import Vue from 'vue'

// 注冊一個全局自定義指令： ‘v-focus'
Vue.directive('focus', {
   inserted: function(el) {
        el.foucs();
    } 
});

2、局部注冊

// 在單個組件中
<template>
  <input v-focus />
</template>

<script>
export default {
    name: 'xx'
    directives: {  // 在該模版任意元素上使用
        inserted: function(el) { el.focus(); } },
    data() {

    }
}
</script>