父子组件的通信
父子组件关系图
![](https://img.imgdb.cn/item/601508053ffa7d37b3ce7091.png)
- 子组件通过props属性拿到父组件的内容,父组件通过接受子组件发射的事件拿到子组件内容
父组件向子组件传递数据
-
在父组件里以标签的形式写入子组件
-
通过v-bind动态绑定子组件的属性来获取父组件的数据,此时banners=bbanners
<home-swiper :banners="bbanners" />
- 父组件中传递过来的数据都存于子组件的props中
export default {
name: "HomeSwiper",
props: {
banners: {
type: Array,
default () {
return []
}
}
}
-
props值的配置有两种方式:
- 通过数组
- 通过对象
props: ['cmessage', 'ccomics']
props: { <!-- 通过使用对象的方法可以限制数据类型 --> cmessage:String, ccomics:Array
props: { <!-- 如果想要更多的限制,可以将数据都设为一个对象 --> cmessage: { type: String, default: 'aaa', required: true //表示在使用cpn标签时必须传入cmessage属性 }
子组件向父组件传递数据
- 核心
$emit()
- 在子组件中通过$emit()发射事件,父组件才能拿到子组件的内容
itemClick(index) {
// 发射的事件名:'tabClick',额外发射过来的参数:index
this.$emit('tabClick', index)
}
- 在父组件中通过v-on监听子组件发射过来的事件
<tab-control @tabClick="tabClick" />
- 在父组件中对监听过来的子组件事件进行相关操作
tabClick(index) {
console.log(index)
}
[总结]: 将子组件的自定义事件通过$emit()发射给父组件,父组件通过@自定义事件="父组件自定义事件"来监听,之后父组件可以对监听来的子组件事件进行一些处理