Vue3 Composition API：同一组件的多个示例共享状态

rdlzhqv9 于 2023-06-06 发布在 Vue.js

关注(0)|答案(1)|浏览(195)

我正在使用Vue 3和Composition API，但我不知道如何让同一个组件的多个示例工作。

<Loader />
<Loader />
<Loader />

Loader.vue

export default {
    data() {
        return {
            status: null
        }
    }
}

现在，当第一个Loader完成并设置status时，其他<Loader />组件就可以按预期工作。
然而，当使用如下的Composition API时，完成的第一个<Loader />设置状态，所有其他组件使用新的状态，而不是使用自己的变量。

const status = ref(null)

如何在Vue3中使用Composition API实现此行为？
我发现了一个关于类似问题的旧question，但这对Composition API没有帮助。我想，这与组件的状态管理有关。官方文件也帮不上忙。

1条答案

所以我不知道你是如何将状态传递到Loader的。您应该在每个装载机上都有一个这样的属性。

<Loader :status="status"/>
<Loader :status="status"/>
<Loader :status="status"/>

然后在Loader中你必须声明 prop

const props = defineProps(['status']);

现在，当您更新父级中的状态时，它应该会执行到所有示例。
如果这不是你遇到的问题，另一种类似的问题，经常会出现你有几个相同名称的div是缺乏一个唯一的ID。要解决这个问题，您需要执行以下操作：

<Loader :status="status" key="1"/>
<Loader :status="status" key="2"/>
<Loader :status="status" key="3"/>

这通常是foreach循环的问题，但在本例中也可能是您遇到的问题。