一、现在有两个组件分别是根组件app 根组件app的子组件cpn而组件之间的数据是不可以互相访问的现在需要将子组件cpn中的info数据在根组件app的页面中展示出来形成父子组件通讯请用代码完成这种子传父的效果用vuejs给出完整代码

<template>
  <div>
    <cpn @sendInfo="handleReceive"></cpn>
    <p>{{info}}</p>
  </div>
</template>
<script>
import cpn from './components/cpn.vue';

export default {
  components: {
    cpn
  },
  data() {
    return {
      info: ''
    };
  },
  methods: {
    handleReceive(data) {
      this.info = data;
    }
  }
};
</script>
<!-- cpn.vue -->
<template>
  <div>
    <button @click="send">发送数据给父组件</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: 'Hello World'
    };
  },
  methods: {
    send() {
      this.$emit('sendInfo', this.info);
    }
  }
};
</script>