vue3 父组件监听子组件值变化

在 Vue 3 中，父组件可以通过使用 `v-model` 或者使用 `.sync` 修饰符来监听子组件值的变化。以下是两种方法的示例：

1. 使用 `v-model`：

在父组件中，可以在子组件上使用 `v-model` 来实现双向绑定。首先，在子组件中定义一个 `value` 属性和一个 `$emit` 方法来触发值的变化，然后在父组件中使用 `v-model` 来监听和更新子组件的值。

子组件：

   <template>
     <input type="text" :value="value" @input="$emit('input', $event.target.value)">
   </template>
   
   <script>
   export default {
     props: ['value']
   }
   </script>

父组件：

   <template>
     <div>
       <child-component v-model="childValue"></child-component>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         childValue: ''
       };
     }
   }
   </script>

父组件中的 `childValue` 将会自动响应子组件值的变化。

2. 使用 `.sync` 修饰符：

在 Vue 3 中，`.sync` 修饰符被废弃了，但我们可以使用新的写法来实现相同的效果。首先，在子组件中定义一个 `value` 属性和一个 `$emit` 方法来触发值的变化，然后在父组件中使用修饰符 `:value.sync` 来监听和更新子组件的值。

子组件：

   <template>
     <input type="text" :value="value" @input="$emit('update:value', $event.target.value)">
   </template>
   
   <script>
   export default {
     props: ['value']
   }
   </script>

父组件：

   <template>
     <div>
       <child-component :value.sync="childValue"></child-component>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         childValue: ''
       };
     }
   }
   </script>

父组件中的 `childValue` 将会自动响应子组件值的变化。

通过以上两种方法，父组件都可以监听到子组件值的变化，并作出相应的响应。