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

问题描述

我正在使用 vue3-carousel 包在我的项目中显示 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 正在脚本中更新。

解决方法

看看我下面的例子...

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

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

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

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

import { toRefs } from 'vue'

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

只要父以任何方式更改推送到道具的数据，此引用都会更改。但是这个引用也是只读。因为道具一直是one way only。

这个问题有两种解决方案：

永远不要用新数组替换 prop/child ref 的值，只修改数组（使用 splice 而不是 filter）。这是可能的，但被认为是“脏的”。因为通过更新引用来破坏组件真的很容易。就像地雷在等待一个粗心的程序员......
使用上面“正确”的方式并拥抱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,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>

javascript vue-composition-api vuejs3