- __全局组件__：
- 优缺点：一直挂载影响性能 使用简单
- 命名规范：下划线，小写
- 全局组件的定义：
<body>
<div id="app"></div>
<script>
const root = Vue.createApp({
template:`
<div> 组件1
<div>组件</div>
<component—childer />
</div>
`
})
//定义 全局组件
root.component('component—childer',{
template:` <div> 我是根组件 </div> `
})
root.mount('#app')
</script>
</body>
- __局部组件__:
- 优缺点：定义后需要注册才能使用，性能较高
- 命名规范：大写 驼峰式命名规则
- 全局组件的定义：
<script>
//<1> 定义 局部组件
const MyChild = {
template: ` <div> 我是局部 子组件 </div>`
}
const root = Vue.createApp({
//<2> 定义 components 需要使用的局部组件
components: {
MyChild
},
template: `
<div> 组件1
<div>组件</div>
<MyChild />
</div>
`
})
root.mount('#app')
</script>
<body>
<div id="app"></div>
<script>
const root = Vue.createApp({
template:`
<div> 组件1
<div>组件</div>
<component—childer />
</div>
`
})
//定义 全局组件
root.component('component—childer',{
template:` <div> 我是根组件 </div> `
})
root.mount('#app')
</script>
</body>