Vue 3 - 如何更改多个 chid 组件之一的数据？

Question

我有一个 Vue 3 项目，其中有一个父组件加载其他组件，然后加载另一个组件再加载另一个组件。

为了给你一个想法，我有一个按钮组件。在一组数字中多次添加按钮，集合进入卡片，卡片进入主视图组件。

所以 4 个级别：

我在 Number 组件上有一个绑定变量，它通过真或假将其设置为活动或不活动。

我想要一种方法来在我的 <script setup> 标签中设置一个函数在父顶部主要组件（或其内部的一个组件）中打开一个或多个按钮组件（active true或假）。

有道理吗？

我在考虑是否需要使用 emit 或仅使用 vuex 数据存储中的状态数据。但是我对如何从主要父 4 级组件中识别特定按钮组件（多次使用）感到有点困惑...

（实际上我想在那里添加另一种类型的按钮组件来激活它，打开或关闭所有其他按钮 - 但我认为如果我了解如何从一个组件中的一个函数访问变量在将解决我的问题的另一组组件中...)

如果你能帮助我，请告诉我这是否合理。

请随时将我指向 Vue 3 文档，我一直在努力寻找解决方案，但我不确定具体去哪里找，因为我正在使用 <script setup> 新标签，我认为那里的很多例子都不适合我。

任何一点帮助都将不胜感激。非常感谢！

Answer 1

谢谢@Matt。我最终将 Vuex 变量用作数组。

然后在我的 Button 组件中，我的 <script setup> 中有这个用于 isPicked 变量，例如：

const isPicked = computed(() => {
  return store.state.session.btnsPicked.find(
    (i) => i === props.btn
  )
})

所以我的组件变量现在对 Vuex 状态值做出反应。

Vue 3 - How to change data on one of multiple chid components?