vue3 子组件传值给父组件

在Vue3中，子组件向父组件传递值可以通过自定义事件和props属性来实现。

1. 使用自定义事件：
子组件可以通过`$emit`方法触发一个自定义事件，并将需要传递的值作为参数传递给父组件。在父组件中，可以通过在子组件上监听该自定义事件来接收传递的值。

子组件代码示例：

   <template>
     <button @click="sendValue">传递值给父组件</button>
   </template>
   
   <script>
   export default {
     methods: {
       sendValue() {
         this.$emit('custom-event', '传递的值');
       }
     }
   }
   </script>

父组件代码示例：

   <template>
     <div>
       <child-component @custom-event="handleValue"></child-component>
       <p>接收到的值：{{ receivedValue }}</p>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         receivedValue: ''
       }
     },
     methods: {
       handleValue(value) {
         this.receivedValue = value;
       }
     }
   }
   </script>

2. 使用props属性：
父组件可以通过props属性向子组件传递一个变量，子组件可以通过props接收该变量，并在需要时修改它。父组件可以监听子组件的变化来获取传递的值。

父组件代码示例：

   <template>
     <div>
       <child-component :value="receivedValue" @update-value="handleValue"></child-component>
       <p>接收到的值：{{ receivedValue }}</p>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         receivedValue: ''
       }
     },
     methods: {
       handleValue(value) {
         this.receivedValue = value;
       }
     }
   }
   </script>

子组件代码示例：

   <template>
     <div>
       <button @click="updateValue">修改值并传递给父组件</button>
     </div>
   </template>
   
   <script>
   export default {
     props: ['value'],
     methods: {
       updateValue() {
         const newValue = '新的值';
         this.$emit('update-value', newValue);
       }
     }
   }
   </script>