网站开发维护成本计算seo管理系统
需求中有个场景是需要在子组件中传多个参数，让父组件接收所有入参，并且父组件也要加自己的参数
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>