1 子組件通過emit 函數(shù) 傳遞事件名'init-complete 和 數(shù)據(jù)dateRange
this.$emit('init-complete', dateRange)2? 父組件 創(chuàng)建方法 接收數(shù)據(jù)
handleInitComplete(dateRange) {}3 父組件 創(chuàng)建的方法 和 子組件事件綁定
<component :is="currentComponent" :passObj="passObj" ref="component" @init-complete="handleInitComplete"></component>4 完整代碼
4.1 子組件
<template>
<div class="child-component">
<!--子組件的內(nèi)容-->
</div>
</template>
<script>
export default {
data() {
return {
dateRange: {} // 存儲子組件發(fā)送給父組件的數(shù)據(jù)
}
},
mounted() {
// 將子組件的數(shù)據(jù)通過emit函數(shù)發(fā)送給父組件
this.$emit('init-complete', this.dateRange)
}
}
</script>
4.2 父組件文章來源：http://www.zghlxwxcb.cn/news/detail-669512.html
<template>
<div class="parent-component">
<!--父組件的內(nèi)容-->
<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: {} // 存儲要傳遞給子組件的數(shù)據(jù)
}
},
methods: {
handleInitComplete(dateRange) {
// 處理從子組件傳遞過來的數(shù)據(jù)
console.log(dateRange)
// 進一步處理數(shù)據(jù)
}
}
}
</script>
ps: 不能傳遞list 類型文章來源地址http://www.zghlxwxcb.cn/news/detail-669512.html
到了這里，關(guān)于vue 子組件 emit傳遞事件和事件數(shù)據(jù)給父組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
