父组件
import { ref, onMounted, watchEffect, toRefs, reactive } from 'vue'
const month = ref(null)
const state = reactive({
getOnceTable: null,
})
watchEffect(() => {
// 拿到子组件的一些数据
const obj = toRefs(month.value)
// 本页面定义方法
state.getOnceTable = obj.getOnceTable
})
子组件
// defineExpose
import { ref, defineExpose } from 'vue'
// 父组件props
let props = defineProps({
searchParams: {
type: Object,
default: {}
}
})
console.log(props.searchParams, 'searchParamssearchParamssearchParams');
// 初始化
const getOnceTable = async () => {
if (props.searchParams.showType === '1') {
currentTableDateType.value = 'month'
const data = await Api.queryDetailTotalMileage({
// 初始化
console.log(data, 'datadata');
})
}
}
getOnceTable()
defineExpose({
getOnceTable,
})
本文介绍了在Vue中如何使用ref和reactive进行父子组件的数据交互,以及如何通过watchEffect监听子组件变化并更新父组件状态。同时展示了如何在子组件中使用defineExpose暴露方法给父组件调用。
840

被折叠的 条评论
为什么被折叠?



