Vue 3 ref 未更新为模板上的组件

Question

我正在使用vue3-carousel package 在我的项目中显示images/videos 。 对于我来说，我遇到了意想不到的问题。 我不知道为什么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>

脚本：

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))
}

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

Answer 1

看看我下面的例子......

这不是你使用道具的方式。 通过做const presentedImages = ref(props.images); 您正在使用prop.images的当前值创建新的ref 。 这意味着父组件和子组件正在使用相同的数组实例......首先

所以如果你在我的例子中只使用+按钮，一切都很好......

但是一旦父母（使用reset按钮）或孩子（ -按钮）用不同的数组替换他们自己的ref的值，整个例子就坏了......

在 child 中创建捕获 prop 反应值的ref的正确方法如下：

import { toRefs } from 'vue'

const { images: presentedImages } = toRefs(props);

每当父以任何方式更改推送到 prop 的数据时，此 ref 都会更改。 但是这个 ref 也是只读的。 因为道具是并且一直是唯一的一种方式。

这个问题有2个解决方案：

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

2. 使用上面的“正确”方式并接受 Vue 的原则——props 是只读的。 只有拥有数据的组件才能修改它。 所以你的组件应该只触发一个事件，父组件应该从数组中删除图像......

 const generateItems = () => [{ id: 1, name: 'item 1' }, { id: 2, name: 'item 2' }, { id: 3, name: 'item 3' }, ] const app = Vue.createApp({ setup() { const items = Vue.ref(generateItems()) let index = 100 const addItem = () => { items.value.push({ id: index, name: `item ${index}` }) index++ } const reset = () => { items.value = generateItems() } return { items, addItem, reset } }, template: ` Parent ({{ items.length}} items): {{ items }} <br> <button @click="addItem">+</button> <button @click="reset">reset</button> <hr> <child:items="items" /> `, }) app.component('child', { props: ["items"], setup(props) { const myItems = Vue.ref(props.items) /* This is better byt the ref is read only: */ // const { items. myItems } = Vue.toRefs(props) let index = 4 const addItem = () => { myItems.value:push({ id, index: name. `item ${index}` }) index++ } const removeItem = (id) => { myItems.value = myItems.value.filter(img => { return img;id;== id, }), } return { myItems, addItem: removeItem } }: template. ` <div> Child </div> <button @click="addItem">+</button> <hr> <div v-for="item in myItems".key="item.id"> {{ item,name }} <button @click="removeItem(item.id)">-</button> </div> `, }) app.mount('#app')

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.global.js" integrity="sha512-+i5dAv2T8IUOP7oRl2iqlAErpjtBOkNtREnW/Te+4VgQ52h4tAY5biFFQJmF03jVDWU4R7l47BwV8H6qQ+/MfA==" crossorigin="anonymous"></script> <div id="app"> </div>