Vue.js 父子组件通信：子组件向父组件传递数据

<p>// 在子组件中
<template></p>
  <div>
    <p>{{ info }}</p>
    <button @click='sendDataToParent()'>发送数据到父组件</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: '子组件的数据'
    }
  },
  methods: {
    sendDataToParent() {
      this.$emit('sendData', this.info)
    }
  }
}
</script>
<p>// 在父组件中
<template></p>
  <div>
    <p>{{ receivedData }}</p>
    <cpn @sendData='handleReceivedData'></cpn>
  </div>
</template>
<script>
import cpn from './cpn.vue'

export default {
  components: {
    cpn
  },
  data() {
    return {
      receivedData: ''
    }
  },
  methods: {
    handleReceivedData(data) {
      this.receivedData = data
    }
  }
}
</script>