Vue2.x中的父子组件相互通信的实现方法

<template>
  <div>
    <p>群消息girl：</p>
    <div>
      {{ somebody }} 说: 我 {{ age }} 了。
    </div>
    <hr>
    <v-girl-group 
        :girls="aGirls" 
        :noticeGirl="noticeGirl"
        @introduce="introduceSelf"></v-girl-group>
  </div>
</template>

<script>
import vGirlGroup from './GirlGroup'
export default {
  name: 'girl',
  components: {
    vGirlGroup
  },
  data () {
    return {
      aGirls:[{
        name:'小丽',
        age:22
      },{
        name:'小美',
        age:21
      },{
        name:'小荷',
        age:24
      }],
      somebody:'',
      age:'',
      noticeGirl:''
    }
  },
  methods: {
    introduceSelf (opt) {
      this.somebody = opt.name;
      this.age = opt.age;
      // 通知girl收到消息
      this.noticeGirl = opt.name + ',已收到消息';
    }
  }
}
</script>

<template>
  <div>
    <ul>
      <li v-for="(value, index) in girls">
        {{ index }} - {{ value.name }} - {{ value.age }} 
        <button @click="noticeGroup(value.name,value.age)">发送消息</button>
      </li> 
    </ul>
    <div>接收来自大群的消息:{{ noticeGirl }}</div>
  </div>
</template>

<script>
export default {
  name: 'girl-group',
  props: {
    girls: {
      type: Array,
      required: true
    },
    noticeGirl: {
      type: String,
      required: false
    }
  },
  methods: {
    noticeGroup (name, age) {
      this.$emit('introduce',{
        name: name,
        age: age
      })
    }
  }
}
</script>