vue组件的注册

vue组件注册

1，组件名

推荐使用w3c规范中的自定义组件名（字母全小写，并且含有一个连字符-）

使用 kebab-case，例如，<my-component-name>
使用 PascalCase，例如，<MyComponentName>

2,全局注册

使用vue.component进行注册，这里的注册指的是全局注册。

在vue中，使用组件的具体步骤为：

组件注册（vue.component ），新建vue实例（new Vue() ），就可以在具体的div中进行使用组件。

3，局部注册

局部注册需要使用JavaScript对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在new vue实例中，在里面的components部分进行定义想要使用的组件：

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

如果想要B组件能够在A组件中使用，可以如下定义：

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

4，模块系统

可以通过import，require使用一个系统

5，在模块系统中进行局部注册

如果使用了webpack或者Babel模块系统，可以创建一个components目录，将每个组件放在其各自的文件中。

在局部注册时，提前将组件导入，在一个ComponentB.js或者ComponentB.vue组件中进行设置，如代码所示：

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default { components: { ComponentA, ComponentC }, // ... }

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

可以使用webpack（或使用webpack的vue cli3+）的require.context只注册这些通用的基础组件，比如在src/main.js中全局导入基础组件：

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其组件目录的相对路径 './components',
// 是否查询其子目录 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 ) })