父子组件的通信

父子组件关系图

• 子组件通过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()

1. 在子组件中通过$emit()发射事件，父组件才能拿到子组件的内容

itemClick(index) {
    	// 发射的事件名：'tabClick'，额外发射过来的参数：index
		this.$emit('tabClick', index)
	}

2. 在父组件中通过v-on监听子组件发射过来的事件

<tab-control @tabClick="tabClick" />

3. 在父组件中对监听过来的子组件事件进行相关操作

tabClick(index) {
	console.log(index)
}

[总结]： 将子组件的自定义事件通过$emit()发射给父组件，父组件通过@自定义事件="父组件自定义事件"来监听，之后父组件可以对监听来的子组件事件进行一些处理