vu e3子组建调用伏组件

Vue 3 中，子组件调用父组件通常涉及 props 和自定义事件（emits）。当你想让子组件向父组件传递数据或者请求父组件的帮助时，可以按照以下步骤操作：

1. **通过props接收数据**:
父组件将需要的数据作为 prop 传递给子组件。例如，`<child-component :data="parentData"></child-component>`，`parentData` 是父组件的数据，子组件可以通过 `this.$props.data` 访问。

2. **通过emit触发事件**:
子组件想要通知父组件某些状态变化时，可以发射自定义事件。如 `this.$emit('custom-event', { someData })`。在父组件里监听这个事件并处理响应：`<child-component @custom-event="handleChildEvent"></child-component>`，`handleChildEvent` 是父组件的方法。

3. **父子通信示例**:

   <!-- 父组件 -->
   <template>
     <div>
       <child-component :data="parentData" @custom-event="handleDataChange"></child-component>
       <p>Data from child: {{ childData }}</p>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         parentData: 'Parent Data',
         childData: ''
       };
     },
     methods: {
       handleDataChange(data) {
         this.childData = data;
       }
     }
   };
   </script>

   <!-- 子组件 -->
   <template>
     <button @click="sendData">Send Data</button>
   </template>

   <script>
   export default {
     methods: {
       sendData() {
         this.$emit('custom-event', 'New Data from Child');
       }
     }
   };
   </script>