vue3父子组件传值引用类型

在 Vue3 中，父子组件之间传递引用类型的数据，可以使用 `v-model` 或者 props 和 emit 结合的方式。

使用 `v-model`：

1. 在子组件中，将需要传递的引用类型数据绑定到 `value` 上。

   <template>
     <div>
       <input type="text" v-model="value.name">
       <input type="number" v-model="value.age">
     </div>
   </template>
   
   <script>
   export default {
     props: {
       value: {
         type: Object,
         required: true
       }
     }
   }
   </script>

2. 在父组件中，使用 `v-model` 绑定子组件的 `value` 属性。

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

使用 props 和 emit：

1. 在子组件中，将需要传递的引用类型数据通过 props 接收。

   <template>
     <div>
       <input type="text" :value="value.name" @input="updateValue('name', $event.target.value)">
       <input type="number" :value="value.age" @input="updateValue('age', $event.target.value)">
     </div>
   </template>
   
   <script>
   export default {
     props: {
       value: {
         type: Object,
         required: true
       }
     },
     methods: {
       updateValue(key, value) {
         this.$emit('update-value', { ...this.value, [key]: value });
       }
     }
   }
   </script>

2. 在父组件中，通过 `v-bind` 将父组件的数据绑定到子组件的 props 上，通过 `v-on` 监听子组件的事件并更新父组件的数据。

   <template>
     <div>
       <child-component :value="data" @update-value="setData"></child-component>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         data: {
           name: '',
           age: 0
         }
       }
     },
     methods: {
       setData(newValue) {
         this.data = newValue;
       }
     }
   }
   </script>