vue3 子组件传递两个参数给父组件，父组件如何让接收打印

在 Vue3 中，子组件通过 props 向父组件传值是很常见的。如果你想从子组件向父组件传递两个参数并能在父组件接收到它们并打印出来，你可以这样做：

1. **定义子组件**：
在子组件的 `props` 部分，声明你需要的两个属性，例如 `param1` 和 `param2`：

   <template>
     <!-- 子组件内容 -->
     <button @click="sendParams">点击发送</button>
   </template>

   <script setup>
   import { ref } from 'vue';

   const param1 = ref('');
   const param2 = ref('');

   function sendParams() {
     emit('update:params', { param1: param1.value, param2: param2.value });
   }
   </script>

2. **父组件模板**：
父组件模板上需要有一个 prop 接收这两个参数，并监听这个 prop 的变化：

   <template>
     <div>
       <child-component :params="receivedParams" @params-updated="handleParamsUpdate"></child-component>
       <pre>Received params: {{ receivedParams }}</pre>
     </div>
   </template>

3. **父组件计算属性和事件处理函数**：
使用 `setup` 或者 `methods` 来定义 `handleParamsUpdate` 函数来更新 `receivedParams` 变量并打印：

   <script setup>
   import ChildComponent from './ChildComponent.vue';
   
   // 定义接收子组件传递的参数
   const receivedParams = computed(() => ({ params: props.params }));

   function handleParamsUpdate(newParams) {
     console.log('Received:', newParams);
     receivedParams.value.params = newParams;
   }
   </script>

4. **实例化子组件**：
在父组件的 `<script>` 标签中导入并使用子组件：

   import { defineComponent } from 'vue';
   export default defineComponent({
     components: {
       ChildComponent
     },
     // ...
   });

现在当你在子组件点击按钮时，会触发 `sendParams`，并将参数传递给父组件，然后在父组件中打印出接收到的参数。