问题:封装组件,在外边想要修改组件里的一个数据,获取到的是最后一个组件的数据,需要获取到所有数组中的数据
解决: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;
};
本文探讨了在 Vue3 中遇到的组件数据绑定问题,当尝试从外部修改封装组件内的数据时,仅能获取到最后一个组件的数据。解决办法是理解并正确使用 Vue3 的 ref 属性,以便能够访问所有数组中的组件数据。
1147

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



