目錄
模板語法
組件注冊
組件名字
//短橫線分隔命名
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
}
})
// 系統(tǒng)：通過 Babel 和 webpack 使用 ES2015 模塊
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
模塊系統(tǒng)
//系統(tǒng)1：通過 import/require 使用一個(gè)模塊系統(tǒng)
//ComponentB.vue
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
基礎(chǔ)組件
只是包裹了一個(gè)輸入框或按鈕之類的元素；是相對通用的忽匈；會(huì)在各個(gè)組件中被頻繁的用到的。
自動(dòng)全局注冊
//此處基于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(
// 剝?nèi)ノ募_頭的 `'./` 和結(jié)尾的擴(kuò)展名
fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
)
)
// 全局注冊組件
Vue.component(
componentName,
// 如果這個(gè)組件選項(xiàng)是通過 `export default` 導(dǎo)出的墓赴，
// 那么就會(huì)優(yōu)先使用 `.default`，
// 否則回退到使用模塊的根航瞭。
componentConfig.default || componentConfig
)
})
