組件
組件注冊
需要組件配置對象(就是一個普通對象)
組件配置對象
const 對象名(組件名) = {
// template中有且只能有一個根節(jié)點
template: `
<div></div>
`,
// 函數(shù)返回值的形式
data () {
return {
// 組件中的data默認只能被當前組件獲取
msg: ""
}
}
}
全局注冊
在所有的組件中都可以直接使用
Vue.component('組件名', 組件配置對象)
const com1 = {
name: 'com1'
}
const com2 = {
name: 'com2'
}
const com3 = {
name: 'com3'
}
const com4 = {
name: 'com4'
}
const components = [com1, com2, com3, com4]
components.forEach(component => Vue.component(component.name, component))
局部注冊
const BedRoom = {
template: `
<div>臥室</div>
`
}
const House = {
template: `
<div>
<bed-room></bed-room>
</div>
`,
components: {
// 組件名: 組件配置對象
BedRoom: BedRoom
}
}