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

<template>
  <div>
    <h1>父组件展示子组件数据</h1>
    <cpn @sendInfo='showInfo'></cpn>
    <p>子组件传来的info数据：{{info}}</p>
  </div>
</template>
<script>
import cpn from './cpn.vue'

export default {
  components: {
    cpn
  },
  data() {
    return {
      info: ''
    }
  },
  methods: {
    showInfo(data) {
      this.info = data
    }
  }
}
</script>
<p>&lt;cpn.vue&gt;
<template></p>
  <div>
    <h2>子组件</h2>
    <button @click='sendInfo'>传送info数据到父组件</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendInfo() {
      this.$emit('sendInfo', '子组件传来的info数据')
    }
  }
}
</script>
<p>&lt;/cpn.vue&gt;</p>