本地做织梦网站,临沂做网站哪家好,广州领域设计网络运营有限公司,手机主题如何自己制作网站需求中有个场景是需要在子组件中传多个参数#xff0c;让父组件接收所有入参#xff0c;并且父组件也要加自己的参数
1.子组件传多个参数给父组件
子组件
// 子组件 ChildComponent.vue
templatebutton clicksendDataToParent传递数据给父组件…需求中有个场景是需要在子组件中传多个参数让父组件接收所有入参并且父组件也要加自己的参数
1.子组件传多个参数给父组件
子组件
// 子组件 ChildComponent.vue
templatebutton clicksendDataToParent传递数据给父组件/button
/templatescript
export default {methods: {sendDataToParent() {const param1 参数1;const param2 参数2;this.$emit(send-data, param1, param2);}}
}
/script
父组件
// 父组件 ParentComponent.vue
templatedivChildComponent send-datahandleDataFromChild/ChildComponent/div
/templatescript
export default {methods: {handleDataFromChild(param1, param2) {console.log(参数1:, param1);console.log(参数2:, param2);}}
}
/script
2.子组件传1个参数给父组件 并且父组件函数也传1个参数
子组件
// 子组件 ChildComponent.vue
templatebutton clicksendDataToParent传递数据给父组件/button
/templatescript
export default {methods: {sendDataToParent() {const param1 参数1;this.$emit(send-data, param1);}}
}
/script 父组件
// 父组件 ParentComponent.vue
templatedivChildComponent send-datahandleDataFromChild($event,customParam)/ChildComponent/div
/templatescript
export default {methods: {handleDataFromChild(param1, customParam) {console.log(参数1:, param1);console.log(自定义参数:, customParam);}}
}
/script 3.子组件传2个参数给父组件 并且父组件函数也传1个参数
子组件
// 子组件 ChildComponent.vue
templatebutton clicksendDataToParent传递数据给父组件/button
/templatescript
export default {methods: {sendDataToParent() {const param1 参数1;const param2 参数2;this.$emit(send-data, param1, param2);}}
}
/script
父组件 // 父组件 ParentComponent.vue
templatedivChildComponent send-datahandleDataFromChild(arguments,customParam)/ChildComponent/div
/templatescript
export default {methods: {handleDataFromChild(chlidParams, customParam) {console.log(子组件中多个参数:, chlidParams);console.log(自定义参数:, customParam);}}
}
/script
