一,什么是组件:
1, 扩展HTML元素,封装可重用的代码
如下图,左侧是一个页面 被拆分成小的区块,每个区块对应一个组件,组件可以嵌套,最终组合成完成页面
.png
2, 组件设计原则
页面上每个独立的可视/可交互区域视为一个组件
每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护
页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面
如下示例:把组件拆分成根组件和两个子组件:
const app = Vue.createApp({
template:`<div>
<moduleone />
<moduletwo />
</div>`
})
app.component('moduleone',{
template:`<div>moduleone</div>`
});
app.component('moduletwo',{
template:`<div>moduletwo</div>`
});
const vm = app.mount('#contentMain');
3, 组件还具备复用性
如下示例:有三个组件,其中一个组件发生变化不会影响到其他组件,里面的数据属于组件独享
const app = Vue.createApp({
template: `<div>
<modulecounter />
<modulecounter />
<modulecounter />
</div>`
})
app.component('modulecounter', {
data() {
return {
count: 1
}
},
template: `<div @click ="count += 1">{
{count}}</div>`
});
const vm = app.mount('#contentMain');
二,局部组件和全局组件
1,全局组件
由于app.component 定义的组件为全局组件,父组件及其他子组件都可使用
示例如下:
const app = Vue.createApp({
template: `<div>
<modulecounter-parent />
<modulecounter />
</div>`
})
app.component('modulecounter-parent', {
template: `<modulecounter />`
});
app.component('modulecounter', {
data() {
return {
count: 1
}
},
template: `<div @click ="count += 1">{
{count}}</div>`
});
const vm = app.mount('#contentMain');
全局组件,定义好后,即使不用 也是一直挂载在 vue实例上的,对性能有一定影响,但是可随时使用;
2,局部组件
局部组件定义方式如下示例:
const CounterChild = {
data() {
return {
count: 1
}
},
template: `<div @click ="count += 1">{
{count}}</div>`
}
const app = Vue.createApp({
components: {
'counter-child': CounterChild
},
template: `<div>
<counter-child />
</div>`
})
const vm = app.mount('#contentMain');
局部组件 定义一个常量,通过 components 声明,声明后 可在模板内使用,性能较高,使用起来麻烦,局部组件定义尽量用驼峰式命名,使用时,要做一个名字和组件间的映射;