vue3中子向父组件传数据并显示

在 Vue 3 中，子组件向父组件传递数据并显示通常通过 prop (property) 实现。这是单向数据流的一部分，让父子组件之间的数据交互变得更清晰、更易于管理。以下是基本步骤：

1. **父组件接收**：在父组件模板里，你可以声明一个 prop，指定属性名和接受的数据类型，如 `v-bind:` 或者简写 `:`。例如：

   <template>
     <div>
       <child-component :data="parentData"></child-component>
     </div>
   </template>

   <script>
   import ChildComponent from './ChildComponent.vue';
   export default {
     components: {
       ChildComponent,
     },
     data() {
       return {
         parentData: '', // 父组件初始值
       };
     },
   };
   </script>

2. **子组件发送**：在子组件中，通过 `props` 定义可以接收父组件的数据，并可以在需要的时候更新这个值。当子组件的状态改变时，可以通过 `$emit` 触发自定义事件来通知父组件更新。例如：

   <template>
     <button @click="updateParentData">点击更新</button>
     <p>子组件数据: {{ childData }}</p>
   </template>

   <script>
   export default {
     props: ['data'], // 接收父组件传递的 data
     methods: {
       updateParentData() {
         this.$emit('update:data', '新的数据'); // 触发自定义事件，更新父组件数据
       }
     },
   };
   </script>