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

在子组件 cpn 中，我们需要定义一个 info 属性，并在需要传递数据的时候触发一个自定义事件：

Vue.component('cpn', {
  template: `
    <div>
      <p>{{ info }}</p>
      <button @click='handleClick'>点击传递数据到父组件</button>
    </div>
  `,
  data() {
    return {
      info: '子组件中的数据'
    }
  },
  methods: {
    handleClick() {
      this.$emit('pass-data', this.info)
    }
  }
})

在根组件 app 中，我们需要在子组件中绑定一个 pass-data 事件，并在事件处理函数中接收来自子组件的数据：

new Vue({
  el: '#app',
  data() {
    return {
      parentData: ''
    }
  },
  methods: {
    handlePassData(data) {
      this.parentData = data
    }
  }
})

在根组件 app 的模板中，我们可以通过 @ 属性将父组件的数据传递给子组件：

<div id='app'>
  <cpn @pass-data='handlePassData'></cpn>
  <p>{{ parentData }}</p>
</div>

这样，当我们在子组件中点击按钮触发 pass-data 事件时，父组件中的 handlePassData 方法会接收到子组件传递过来的数据，并将其保存在 parentData 属性中，在页面中展示出来。