vue 子组件 emit传递事件和事件数据给父组件

1 子组件通过emit 函数 传递事件名'init-complete 和 数据dateRange

this.$emit('init-complete', dateRange)

2  父组件 创建方法 接收数据

 handleInitComplete(dateRange) {}

3 父组件 创建的方法 和 子组件事件绑定

<component :is="currentComponent" :passObj="passObj" ref="component" @init-complete="handleInitComplete"></component>

4 完整代码

4.1 子组件

<template><div class="child-component"><!--子组件的内容--></div>
</template><script>
export default {data() {return {dateRange: {}  // 存储子组件发送给父组件的数据}},mounted() {// 将子组件的数据通过emit函数发送给父组件this.$emit('init-complete', this.dateRange)}
}
</script>

4.2 父组件

<template><div class="parent-component"><!--父组件的内容--><child-component :passObj="passObj" @init-complete="handleInitComplete"></child-component></div>
</template><script>
import ChildComponent from '@/components/ChildComponent.vue'export default {components: {ChildComponent},data() {return {passObj: {}  // 存储要传递给子组件的数据}},methods: {handleInitComplete(dateRange) {// 处理从子组件传递过来的数据console.log(dateRange)// 进一步处理数据}}
}
</script>

ps: 不能传递list 类型