vue组件注册

大家好,我是龙骑士,今天给大家讲一下vue的组件注册

•  全局组件注册

//w3c标准命名,注册全局组件
Vue.component('global-component',{

})
//首字母大写命名,注册全局组件
Vue.component('GlobalComponent',{})

• 局部组件注册

在一个普通js文件内定义号组件模板: 

var ComponentA={};
var ComponentB={};
var ComponentC={};

•  在components选项中定义你想要的组件

new Vue({
el:'#app',
    components{
        'component-a':ComponentA,
        'component-b':ComponentB,
        'component-c':ComponentC
}
})

• 如果你想要在ComponentB中调用ComponentA可用,需要这样写

var ComponentA={};
var ComponentB={
    components:{
        'component-a':ComponentA
},
//...
}

• 如果你想要在ComponentB中调用ComponentA可用,还可以这样写

var ComponentA={//...};

import ComponentA from './ComponentA.vue';
export defalt({
    //...
    components:{
        'component-a':ComponentA
}
})

• 基础组件的全局化自动注册

可能你的许多组件只是包裹了一个输入框或一个 按钮之类的元素，是相对通用的组件，我们优势把他们称作基础组件.他们在各个组件中会被频繁引用到,会导致有一个长长的引入列表

import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './CompenentC.vue';

如果你使用了webpack,那么你就可以使用require.context()来全局注册这些基础组件，下面是全局注册基础组件的代码

import Vue from './vue'
import upperFirst from 'lodash/upperFirst'
import camlcase from 'lodash/camlcase'

const requireComponents=require.context(
    //其组件目录相对路径
    './components',
    //是否查询子目录
    false,
    //匹配基础组件文件名的正则表达式
    
) 
requireComponents.keys().forEach(
    filename=>{
        //获取组件配置
        const componentConfig=requireComponents(fileName);
        //获取组件的pascalcase命名
        const componentName=upperFirst(
            camlCase()    
)
})

全局注册行为必须在根vue实例注册(通过new Vue)创建之前