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

你能回答我为什么当我删除图片时轮播组件中的数据没有更新吗？仅供引用:Ref 正在脚本中更新。

Answer 1

请看下面我的示例...

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

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

但是一旦 parent (使用reset 按钮)或 child (- 按钮)替换了他们自己的ref 的值 由不同的数组，整个例子坏了...

在捕获 prop react 值的子级中创建 ref 的正确方法如下:

import { toRefs } from 'vue'

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

只要父级以任何方式更改推送到 prop 的数据，此 ref 就会更改。但此引用也是只读。因为 Prop 一直都是one way only .

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

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

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

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>