Vue.js 如何从嵌套的子组件更改父组件？

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

组件结构如下所示：

父级（页面）->子级1（表格布局）->子级2（表体）->子级3（行）

在子3中，有一个删除函数，用于删除tableData中的索引

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

目前，我正在使用watch-to-watch-tableData来响应父组件中的更改。但是，每当更新tableData时，watch函数将始终循环tableData以查找selectedRow是否仍然存在，当数组很大时，这是非常不可取的

我曾想过使用emit，但它必须经过两个组件才能到达父级，这使得代码很难管理

我也想过坐公交车，但这也不是一个好习惯

---

有人能就这个问题给我一些建议吗？

因为您已将tableData存储在vuex中。。。您可以使用变异来实现这一点

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

比如说

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

---

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

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

比如说

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

---

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

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

如果您可以共享vuex代码，那么我可以根据您的代码本身更新我的答案索引将被删除。如果移除的行是我正在选择的行，则我必须为名为selectedRow（父组件中的本地状态）的变量指定另一个值。我正在尝试为深度嵌套的子组件找到一种最佳方式来通知根父组件有关更改。啊，那么您可以在vuex中拥有一个名为“selectedRow”的状态，在删除之前可以在其中存储该特定值。然后在您的父组件中..您可以使用…mapState（['selectedRow']）访问状态，它本质上是反应的。在这种情况下，它似乎是最好的选择。我担心过度使用vuex，因为我认为selectedRow应该是本地数据，但我想没有更好的选择了。谢谢你的回答。太好了！如果它对你有效并且你很快乐，那么一般来说你会接受答案。这不仅有助于解决同一问题的其他人，也意味着人们将来更有可能在你遇到的任何其他问题上帮助你。您可以在此处阅读关于接受的内容：如果您可以共享vuex代码，那么我可以根据您的代码本身更新我的答案索引将被删除。如果移除的行是我正在选择的行，则我必须为名为selectedRow（父组件中的本地状态）的变量指定另一个值。我正在尝试为深度嵌套的子组件找到一种最佳方式来通知根父组件有关更改。啊，那么您可以在vuex中拥有一个名为“selectedRow”的状态，在删除之前可以在其中存储该特定值。然后在您的父组件中..您可以使用…mapState（['selectedRow']）访问状态，它本质上是反应的。在这种情况下，它似乎是最好的选择。我担心过度使用vuex，因为我认为selectedRow应该是本地数据，但我想没有更好的选择了。谢谢你的回答。太好了！如果它对你有效并且你很快乐，那么一般来说你会接受答案。这不仅有助于解决同一问题的其他人，也意味着人们将来更有可能在你遇到的任何其他问题上帮助你。您可以在此处阅读有关接受的内容：