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 父组件文章来源：https://www.toymoban.com/news/detail-669512.html
<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 类型文章来源地址https://www.toymoban.com/news/detail-669512.html
到了这里，关于vue 子组件 emit传递事件和事件数据给父组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
