0

我正在使用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 正在脚本中更新。

4

1 回答 1

5

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

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

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

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

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

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>

于 2021-03-23T17:06:17.737 回答