Vue.js 父子组件通讯：子组件传数据给父组件

<template>
  <div>
    <cpn @sendInfo='handleReceive'></cpn>
    <p>{{info}}</p>
  </div>
</template>
<script>
import cpn from './components/cpn.vue';

export default {
  components: {
    cpn
  },
  data() {
    return {
      info: ''
    };
  },
  methods: {
    handleReceive(data) {
      this.info = data;
    }
  }
};
</script>
<!-- cpn.vue -->
<template>
  <div>
    <button @click='send'>发送数据给父组件</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: 'Hello World'
    };
  },
  methods: {
    send() {
      this.$emit('sendInfo', this.info);
    }
  }
};
</script>