vue3 rerfs

本文探讨了在 Vue3 中遇到的组件数据绑定问题,当尝试从外部修改封装组件内的数据时,仅能获取到最后一个组件的数据。解决办法是理解并正确使用 Vue3 的 ref 属性,以便能够访问所有数组中的组件数据。
摘要由CSDN通过智能技术生成

问题:封装组件,在外边想要修改组件里的一个数据,获取到的是最后一个组件的数据,需要获取到所有数组中的数据
解决:vue3中的ref属性只能访问到最后一组

// 父组件
<CommonContent
	:ref="(vnode) => (commonContent[index] = vnode)"
	v-for="(item, index) in contentData"
	:key="item.id"
	:contentData="item"
	:keyType="'commution'"
	@reloadChange="reloadChange"
>
</CommonContent>
const commonContent = {};
const changeRick = () => {
	Object.values(commonContent).forEach((comp: any) => {
	// 需要做的
	comp?.parentEvent?.();
	});
};

// 子组件
const parentEvent = () => {
	plState.value = false;
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值