父组件向子组件传递信息父组件const couponListData ref内容) couponList :couponListDatacouponListData /couponList子组件console.log(props.couponListData) let props defineProps({ couponListData: String })父组件调用子组件的方法父组件const dialog ref() dialog.value.open() couponList refdialog/couponList子组件const open () { //方法 } defineExpose({ open, //一些变量需要父组件传递过来赋值的 })子组件向父组件传递信息传递一个参数子组件const emit defineEmits([sendData]) emit(sendData, couponCheckList.value)父组件const handleCoupon (value) { coupon.value value } couponList sendDatahandleCoupon/couponList传递多个参数父组件向子组件传递方法父组件import { provide } from vue const getCurrentShopTarget async () { //方法内容 } provide(getCurrentShopTarget, getCurrentShopTarget) // 提供方法给子组件使用子组件import { inject } from vue const getCurrentShopTarget inject(getCurrentShopTarget) // 注入父组件提供的方法 getCurrentShopTarget()//调用还可以直接携带参数父const getLatestSales (date){}子getLatestSales(date)问题在子组件里修改父组件传递显示的数据父组件的显示也被修改了这是不合理的解决使用深拷贝安装lodashpnpm add lodash子组件中使用以下语句接收数据import { cloneDeep } from lodash const localData ref(cloneDeep(props.nameInfo))
vue3-父子组件通信
发布时间:2026/6/5 15:04:50
父组件向子组件传递信息父组件const couponListData ref内容) couponList :couponListDatacouponListData /couponList子组件console.log(props.couponListData) let props defineProps({ couponListData: String })父组件调用子组件的方法父组件const dialog ref() dialog.value.open() couponList refdialog/couponList子组件const open () { //方法 } defineExpose({ open, //一些变量需要父组件传递过来赋值的 })子组件向父组件传递信息传递一个参数子组件const emit defineEmits([sendData]) emit(sendData, couponCheckList.value)父组件const handleCoupon (value) { coupon.value value } couponList sendDatahandleCoupon/couponList传递多个参数父组件向子组件传递方法父组件import { provide } from vue const getCurrentShopTarget async () { //方法内容 } provide(getCurrentShopTarget, getCurrentShopTarget) // 提供方法给子组件使用子组件import { inject } from vue const getCurrentShopTarget inject(getCurrentShopTarget) // 注入父组件提供的方法 getCurrentShopTarget()//调用还可以直接携带参数父const getLatestSales (date){}子getLatestSales(date)问题在子组件里修改父组件传递显示的数据父组件的显示也被修改了这是不合理的解决使用深拷贝安装lodashpnpm add lodash子组件中使用以下语句接收数据import { cloneDeep } from lodash const localData ref(cloneDeep(props.nameInfo))