vue父组件如何调用子组件的多个值

在Vue中，如果父组件想要从子组件传递多个值，可以采用以下方法：

1. **方法一：通过props属性接收**[^1]
子组件可以定义props，接受父组件传递的值。例如，假设子组件有一个名为`dataProps`的对象：

   <child-component :dataProps="parentData" /> <!-- 在父组件中 -->

父组件可以这样传递数据：

   data() {
     return {
       parentData: { key1: 'value1', key2: 'value2' }
     };
   },
   methods: {
     sendDataToChild() {
       this.$refs.childComponent.dataProps = this.parentData;
     }
   }

2. **方法二：通过事件发射与接收到的响应式绑定**[^2]
父组件可以触发一个事件并携带数据，然后子组件监听这个事件并在回调函数中处理数据：

   // 父组件
   emitData() {
     this.$emit('update:childData', { key1: 'newValue1', key2: 'newValue2' });
   }

   // 子组件模板
   <template>
     <div @update:childData="handleParentData"></div>
   </template>

   // 子组件方法
   methods: {
     handleParentData(newData) {
       this.childData = newData; // 更新子组件内部的数据
     }
   }
   props: {
     childData: {
       type: Object,
       default: () => ({})
     }
   }