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

<template>
  <div>
    <app-cpn @send-info='receiveInfo'></app-cpn>
    <p>子组件传来的信息：{{ info }}</p>
  </div>
</template>
<script>
import AppCpn from './components/AppCpn.vue';

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