杭州网站优化方案合肥做个网站多少钱

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

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>