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 类型