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

<template>
  <div>
    <cpn @get-info='handleGetInfo'></cpn>
    <p>{{ info }}</p>
  </div>
</template>
<script>
import cpn from './components/cpn.vue'

export default {
  name: 'app',
  components: {
    cpn
  },
  data() {
    return {
      info: ''
    }
  },
  methods: {
    handleGetInfo(info) {
      this.info = info
    }
  }
}
</script>
<!-- cpn.vue -->
<template>
  <div>
    <button @click='handleClick'>获取信息</button>
  </div>
</template>
<script>
export default {
  name: 'cpn',
  data() {
    return {
      info: '这是子组件中的数据'
    }
  },
  methods: {
    handleClick() {
      this.$emit('get-info', this.info)
    }
  }
}
</script>