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

在子组件 `cpn` 中，需要通过 `$emit` 方法将 `info` 数据传递给父组件 `app`，代码如下：

<template>
  <div>
    <button @click="handleClick">传递数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: '这是子组件 cpn 中的数据'
    }
  },
  methods: {
    handleClick() {
      this.$emit('update:info', this.info)
    }
  }
}
</script>

在父组件 `app` 中，需要通过 `v-bind` 指令将子组件 `cpn` 中的 `info` 数据绑定到父组件的 `data` 属性中，并在模板中展示出来，代码如下：

<template>
  <div>
    <cpn :info.sync="info"></cpn>
    <div>子组件传递的数据：{{ info }}</div>
  </div>
</template>

<script>
import cpn from './cpn.vue'

export default {
  components: {
    cpn
  },
  data() {
    return {
      info: ''
    }
  }
}
</script>

其中，`v-bind` 指令中的 `.sync` 修饰符表示双向绑定，即当子组件中的 `info` 数据发生变化时，会同步更新到父组件中的 `info` 属性中。在模板中，可以通过 `{{ info }}` 语法将父组件中的 `info` 数据展示出来。