子组件Person.vue的数据chengyuan通过自定义事件的方式传递到Student.vue中进行显示

在Vue.js中，如果你有一个名为`Person.vue`的子组件，它有某个数据属性`chengyuan`（假设这是一个字符串），你可以使用自定义事件（或者说emit和on机制）将其值传递给另一个组件`Student.vue`。具体步骤如下：

1. **在`Person.vue`中定义并发射事件**：

   <template>
     <button @click="showStudent">显示学生</button>
     <div v-if="showChengyuan">
       {{ chengyuan }}
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         chengyuan: '我是来自Person的数据',
         showChengyuan: false,
       };
     },
     methods: {
       showStudent() {
         this.showChengyuan = true;
         // 发射自定义事件
         this.$emit('update-chengyuan', this.chengyuan);
       },
     },
   };
   </script>

2. **在`Student.vue`中接收和处理事件**：

   <template>
     <div v-if="$parent.showChengyuan">
       <p>{{chengyuan}}</p>
     </div>
   </template>

   <script>
   import { on } from 'vue';

   export default {
     created() {
       // 使用on监听来自父组件的更新-chengyuan事件
       on(this, 'update-chengyuan', (newChengyuan) => {
         this.chengyuan = newChengyuan; // 更新数据
       });
     },
   };
   </script>

当你点击`Person.vue`的按钮时，会触发`showStudent`方法，然后通过`$emit`发送事件，`Student.vue`通过`created`生命周期钩子监听这个事件并在接收到新的数据后更新显示。