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

在子组件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的模板中，我们可以通过props属性将父组件的数据传递给子组件：

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

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