Vue2.0组件注册

建议先看看 组件基础篇

Vue.component('component-name', {'一顿操作'})

Vue.component的第一个参数就是 组件名（取名字记得语义化点）

组件名两种写法

• aa-bb式（短横线分隔）

Vue.component('aa-bb', {})
// 必须在引用这个组件时，使用aa-bb
<aa-bb></aa-bb>

• AaBb式（首字母大写）

Vue.component('AaBb', {})
// 引用组件，使用时，两种命名都可使用
<aa-bb></aa-bb>
<AaBb></AaBb>
// 注意：直接在DOM（即非字符串的模板）中使用时只有aa-bb是有效的

全局注册

Vue.component('aa-bb', {
    // 一顿操作
})

这种写法的组件都是全局注册的，即注册之后，可以用在任何新建的Vue根实例（new Vue）的模板中

Vue.component('aa-a', {});
Vue.component('aa-b', {});
Vue.component('aa-c', {});
new Vue({ el: '#app' });

// 引用时，都可以使用
<aa-a></aa-a>
<aa-b></aa-b>
<aa-c></aa-c>
// 同理，每个组件各自内部都可以相互使用 这些组件

局部注册

全局注册即便后期不再使用，也依旧会出现在最终的构建结果中，造成用户无谓的下载

可以通过一个普通的JS对象来定义组件：

let ComponentA = {};
let ComponentB = {};
let ComponensC = {};

然后就可以在components选项中定义 自己想要的组件：

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

对于compoents对象中的每个property来说，其property名就是自定义元素的名字，其property值就是这个组件的选项对象。

注意：局部注册的组件在其子组件中不可用

两种写法让我们可以组件相互使用：

// ComponentA 在 ComponentB中可用
let ComponentA = {}

let ComponentB = {
    components: {
        'component-a': ComponentA
    }
}

// 还有一种常用写法，通过Babel和webpack使用ES2015模块
import CA from './相应的路径';

export default {
    components: {
        CA    // 其实是 CA: CA 的缩写，变量名同时是用在模块中自定义元素的名称、包含了这个组件选项的变量名
    }
}

模块系统

专门为 通过 import/require 使用一个模块系统，特殊说明和注意事项

• 在模块系统中局部注册

推荐新建一个components目录，并将每个组件放置在其各自的文件中：

// 一下是组件CC的文化内部，只需要在使用前导入每个想要使用的组件
import CA from './相对应的路径';
import CB from './相对应的路径';

export default {
    components: {
        CA,
        CB
    }
}

这样组件CA和组件CB都可以在CC的模板中使用了

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

基础组件：只是包含一个输入框或按钮之类的元素，会被频繁使用到。

如果这时使用上面的写法，必然是一个长列表，后期维护起来不方便

// 长列表
import BaseButton from './相应的路径';
import BaseInput from './相应的路径';
import BaseIcon from './相应的路径';
import BaseButton from './相应的路径';

export default {
    components: {
        BaseButton,
        BaseInput,
        BaseIcon,
        BaseButton
    }
}

// 使用时只用了一小部分
<BaseInput
  v-model="searchText"
  @keydown.enter="search"
></BaseInput>
<BaseButton
  @click="search"
  <BaseIcon name="search"></BaseIcon>
></BaseButton>

可以使用webpack(或在内部使用webpack的Vue CLI 3+)，就可以使用 require.context 只全局注册这些通用的基础组件:

// src/main.js 全局导入基础组件的实例代码
import Vue from 'vue';
import upperFirst from './路径';
import camelCase from './路径';

const requireComponent = require.context(
    // 其组件目录的相对路径
    './组件目录路径',
    // 是否查询其子目录
    false,
    // 匹配基础组件文件名的正则表达式
    /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName)
    
    // 获取组件的 PascalCase 命名
    const componentName = upperFirst(
    	camelCase(
        	// 获取和目录深度无关的文件名
            fileName
            	.split('/')
            	.pop()
            	.replace(/\.\w+$/, '')
        )
    )
    
    // 全局注册组件
    Vue.component(
    	componentName,
        // 如果这个组件选项是通过 'export default'导出的
        // 那么就会优先使用 '.default'
        // 否则回退到使用模块的根
        componentConfig.default || componentConfig
    )
})

注意：全局注册的 行为必须在根Vue实例（通过new Vue）创建之前发生