目录
模板语法
组件注册
组件名字
//短横线分隔命名
Vue.component('my-component-name', { /* ... */ })
//驼峰式命名
Vue.component('MyComponentName', { /* ... */ })
全局注册
局部注册
//定义
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
var ComponentD = {
components: {
'component-a': ComponentA
},
}
//注册
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
// 系统：通过 Babel 和 webpack 使用 ES2015 模块
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
模块系统
//系统1：通过 import/require 使用一个模块系统
//ComponentB.vue
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
基础组件
只是包裹了一个输入框或按钮之类的元素；是相对通用的；会在各个组件中被频繁的用到的。
自动全局注册
//此处基于webpack
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.replace(/^\.\/(.*)\.\w+$/, '$1')
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的，
// 那么就会优先使用 `.default`，
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})
