Javascript Vue 3 ref未更新到模板上的组件中

我正在使用该软件包在我的项目上显示

图像/视频

。对于我来说，我遇到了意想不到的问题。我不知道为什么

ref

没有更新我的模板。我在

vue

组件中有此逻辑，如下所示

模板：

<carousel v-if="presentedImages.length" :items-to-show="2" :snapAlign="'start'" :breakpoints="breakpoints" :wrap-around="true">
    <slide class="slide" v-for="image in presentedImages" :key="image.id">
        <img v-if="image.attachment_url" class="videoFile" :src="image.attachment_url" />
        <div  @click="deleteImage(image.id)" class="fa-stack remove-button cross-btn">
            <i class="fa fa-times"></i>
        </div>
    </slide>
    <template #addons>
        <navigation />
    </template>
</carousel>

---

您能回答我为什么在删除图像时，转盘组件中的数据没有更新吗？仅供参考：Ref正在脚本中更新。

看看下面的示例

这不是你使用道具的方式。通过执行

const presentdimages=ref（道具图像）您正在创建新的
ref
，当前值为
prop.images
。这意味着父组件和子组件首先使用同一个数组实例

因此，如果在我的示例中仅使用
+
按钮，则一切正常

但是一旦父项（使用
重置
按钮）或子项（
-
按钮）用不同的数组替换它们自己的
ref
值，整个示例将中断

在子级中创建
ref
以捕获道具的反应值的正确方法如下：

从“vue”导入{toRefs}
const{images:presentDimages}=toRefs（道具）；

只要父级以任何方式更改推送到prop的数据，此ref就会更改。但此引用也是只读的。因为道具一直都是

此问题有两种解决方案：

永远不要用新数组替换prop/child ref的值，只在适当的位置修改数组（使用
splice
而不是
filter
）。这是可能的，但被认为是“肮脏的”。因为通过更新ref很容易破坏组件。这就像一颗地雷在等待一个粗心的程序员


使用上面的“正确”方法并接受Vue原则-道具是只读的。只有拥有数据的组件才应该修改它。因此，您的组件应该只触发一个事件，父组件应该从数组中删除映像



const generateItems=（）=>[{
id:1，
名称：“项目1”
},
{
id:2，
名称：“项目2”
},
{
id:3，
名称：“项目3”
},
]
const app=Vue.createApp({
设置（）{
const items=Vue.ref（generateItems（））
设指数=100
常量附加项=（）=>{
items.value.push({
id:索引，
名称：`item${index}`
})
索引++
}
常数重置=（）=>{
items.value=generateItems（）
}
返回{
项目，
此外，
重置
}
},
模板：`
父项（{items.length}}items）：{{{items}


+
重置

`,
})
应用程序组件（'子'{
道具：[“道具”]，
设置（道具）{
常量myItems=Vue.ref（道具项目）
/*
这比ref为只读更好！
*/
//const{items:myItems}=Vue.toRefs（props）
设指数=4
常量附加项=（）=>{
myItems.value.push({
id:索引，
名称：`item${index}`
})
索引++
}
const removietem=（id）=>{
myItems.value=myItems.value.filter（img=>{
返回img.id！==id；
});
}
返回{
我的项目，
此外，
移除项目
}
},
模板：`
小孩
+

{{item.name}}-
`,
})
app.mount（“#app”）

感谢您分享您的想法！我试过不同的方法。但似乎图书馆兑现了旋转木马项目的价值。我可以在我的组件中更新项目，但在旋转木马组件中不会更新现在。但当我更改PresentDimages的值时，开发人员工具中出现了此错误。**对键“images”的设置操作失败：目标为只读。**我知道props和refs是不可变的。但我为PresentDimages设置了值
presentedImages.value=presentedImages.value.filter（img=>{return img.id！==id；}）这是预期的。再读一遍我的答案。不能更改父零部件的道具值。使用事件并删除父级中的映像…这是库问题。我试过不同的方法。当您添加/删除div时，它会工作，如果您使用库组件操作，则会出现问题
const presentedImages = ref(props.images);
const deleteImage = (id) => {
    removeAttachment(id).then(res => {
        presentedImages.value = presentedImages.value.filter(img => {
            return img.id !== id;
        });
    })
    .catch(err => console.log(err))
}