vue3父组件修改子组件的值

在 Vue.js 中，通过 props 属性可以将数据从父组件传递到子组件，而子组件想要将数据传递回父组件则需要使用自定义事件。下面是一种 Vue 3 中父组件修改子组件的值的方法：

1. 在子组件中，定义一个响应式的数据属性和一个方法。这个方法将修改这个数据属性的值。

   <template>
     <div>
       <p>子组件的值：{{ childValue }}</p>
       <button @click="updateValue">更新子组件的值</button>
     </div>
   </template>
   
   <script>
   import { ref } from 'vue';
   
   export default {
     props: ['parentValue'],
     setup(props) {
       const childValue = ref(props.parentValue);
   
       const updateValue = () => {
         childValue.value = 'new value';
         // 触发自定义事件，将新的值传递给父组件
         emit('update:parentValue', childValue.value);
       };
   
       return {
         childValue,
         updateValue
       };
     }
   };
   </script>

2. 在父组件中，使用 v-model 指令绑定子组件的数据属性，并监听子组件触发的自定义事件。

   <template>
     <div>
       <p>父组件的值：{{ parentValue }}</p>
       <ChildComponent v-model:parentValue="parentValue" />
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: { ChildComponent },
     data() {
       return {
         parentValue: 'initial value'
       };
     }
   };
   </script>

这样，当子组件中的按钮被点击时，会触发自定义事件，并将新的值传递给父组件。父组件接收到新的值后，会更新绑定的数据属性，从而实现父组件修改子组件的值。