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>