Vue 3 ref 没有更新到模板上的组件中

Question

我正在使用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))
}

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

Answer 1

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

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

因此，如果您在我的示例中仅使用+按钮，一切都很好......

但是，一旦父级（使用reset按钮）或子级（-按钮）用不同的数组替换自己的值ref，整个示例就会崩溃......

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

import { toRefs } from 'vue'

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

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

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

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

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>