如何从嵌套的子组件更改父组件？答案

【问题标题】：How to change parent component from nested child component?如何从嵌套的子组件更改父组件？
【发布时间】：2021-04-25 20:10:50
【问题描述】：

情况是这样的。有一个名为 tableData 的对象数组存储表行，现在存储在 vuex 中

组件结构是这样的：

父（页）->子1（tableLayout）->子2（tableBody）->子3（行）

在 child 3 中，有一个删除函数来删除 tableData 中的索引。

如果删除行的 id 是 selectedRow Id，父级需要更新其数据（selectedRow），这些数据将传递给另一个不相关的子组件。

目前我正在使用 watch 来观察 tableData 以响应父组件的变化。但是，watch 函数总是会在 tableData 更新时循环查找 selectedRow 是否仍然存在，这在数组很大时是非常不可取的。

我想过使用emit，但它必须通过2个组件才能到达父级，这使得代码难以管理

我也想过使用总线，但也不是一个好习惯。

有人可以就这个问题给我任何建议吗？

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

您可以将 selectedRow 存储在 vuex 中，然后在 child3 中更新您的 vuex 商店中的 selectedRow

【讨论】：

【解决方案2】：

由于您已经将 tableData 存储在 vuex 中...您可以使用突变来实现这一点

从您的 child2 组件中，您可以调用一个突变来从 tableData 中删除特定索引

例如

this.$store.commit('removeIndex', payload) // where removeIndex is a mutation handler and payload is the index value sent as argument

【讨论】：

如果您可以分享 vuex 代码，那么我可以针对您的代码本身更新我的答案
索引被删除。如果删除的行是我选择的行，我必须为名为 selectedRow 的变量（父组件中的本地状态）分配另一个值。我正在尝试为深度嵌套的子组件找到通知根父级更改的最佳方式。
啊，那么您可以在 vuex 中拥有一个名为“selectedRow”的状态，您可以在其中存储该特定值，然后再删除。然后在您的父组件中..您可以使用 ...mapState(['selectedRow']) 访问状态，这本质上是响应式的
这似乎是这种情况下的最佳选择。我担心过度使用 vuex，因为我认为 selectedRow 应该是本地数据，但我想没有更好的选择。谢谢你的回答。
太棒了！如果它对您有用并且您很高兴-那么通常您会接受答案。这不仅会帮助其他人解决同样的问题，而且还意味着人们将来更有可能帮助您解决您遇到的任何其他问题。您可以在此处阅读有关接受的信息：stackoverflow.com/help/accepted-answer