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>