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>