VUE2 子组件传多个参数，父组件函数接收所有入参并加自定义参数

需求中有个场景是需要在子组件中传多个参数，让父组件接收所有入参，并且父组件也要加自己的参数

1.子组件传多个参数给父组件

子组件

// 子组件 ChildComponent.vue <template>   <button @click="sendDataToParent">传递数据给父组件</button> </template>  <script> export default {   methods: {     sendDataToParent() {       const param1 = '参数1';       const param2 = '参数2';       this.$emit('send-data', param1, param2);     }   } } </script>

父组件

// 父组件 ParentComponent.vue <template>   <div>     <ChildComponent @send-data="handleDataFromChild"></ChildComponent>   </div> </template>  <script> export default {   methods: {     handleDataFromChild(param1, param2) {       console.log('参数1:', param1);       console.log('参数2:', param2);     }   } } </script>

2.子组件传1个参数给父组件 ，并且父组件函数也传1个参数

子组件：

// 子组件 ChildComponent.vue <template>   <button @click="sendDataToParent">传递数据给父组件</button> </template>  <script> export default {   methods: {     sendDataToParent() {       const param1 = '参数1';       this.$emit('send-data', param1);     }   } } </script>

 父组件：

// 父组件 ParentComponent.vue <template>   <div>     <ChildComponent @send-data="handleDataFromChild($event,'customParam')"></ChildComponent>   </div> </template>  <script> export default {   methods: {     handleDataFromChild(param1, customParam) {       console.log('参数1:', param1);       console.log('自定义参数:', customParam);     }   } } </script>

 3.子组件传2个参数给父组件 ，并且父组件函数也传1个参数

子组件

// 子组件 ChildComponent.vue <template>   <button @click="sendDataToParent">传递数据给父组件</button> </template>  <script> export default {   methods: {     sendDataToParent() {       const param1 = '参数1';       const param2 = '参数2';       this.$emit('send-data', param1, param2);     }   } } </script>

父组件

 

// 父组件 ParentComponent.vue <template>   <div>     <ChildComponent @send-data="handleDataFromChild(arguments,'customParam')"></ChildComponent>   </div> </template>  <script> export default {   methods: {     handleDataFromChild(chlidParams, customParam) {       console.log('子组件中多个参数:', chlidParams);       console.log('自定义参数:', customParam);     }   } } </script>