Vue 组件层次结构和传递数据

Posted 2023-02-23

【中文标题】Vue 组件层次结构和传递数据

【英文标题】：Vue components hierarchy and passing data

【发布时间】：2020-03-23 22:42:09

【问题描述】：

我正在用 Vue 编写一个应用程序，我很难理解组件层次结构，即父子关系以及如何传递数据。

我有一个包含地图的视图，该地图又具有一些覆盖在地图顶部的导航控件和选项。现在，我希望这些控件可以在不必将按钮嵌套在实际地图中的情况下操作地图，因为这会导致严重的显示问题（例如，单击缩放按钮会穿过按钮并单击其下的下一个元素）。

我的应用如下所示：

Mapview
    Map
    Controls
    Options
        Optionpanel1
        Optionpanel2
        ...

现在，Optionpanel1 中的 html 输入元素需要控制 Map 中的某些内容，这实际上并不是它的父组件。此外，需要将 Map 中的一些数据传递给 Optionpanel1，以便它知道要控制什么。更糟糕的是，Options 中的某些内容还需要将某些内容向下传递给 Optionpanel1，因此，即使事件总线允许向上通信，它也无法解决我需要将数据从父级传递给间接子级以及不是它的组件孩子们。

如果我将 Options 嵌套在 Map 中并使用 :myProp="prop" 将其向下传递，然后在 Options 中，在 props 中声明它并绑定到 Optionpanel1，我实际上可以将所需的属性向下传递，在那里再次声明它作为道具。但正如我之前提到的，我不想在视觉上嵌套的嵌套元素会导致大量问题，例如鼠标单击失败。为了定义父子关系，元素甚至需要相互嵌套吗？ 我希望组件交换只读数据，而 Y 不是 DOM 中 X 的子级。另外，即使像这样嵌套组件不会导致视觉问题，但一路上必须在每个组件中注册和绑定它似乎不是很烦人？

我不明白为什么简单地从另一个组件中读取内容如此困难。似乎 Vue 正在引发一个它应该解决的问题？我在这里遗漏了什么还是我以完全错误的方式看待这个？

提前致谢。

【参考方案1】：

基本上，您有 2 个选项来控制复杂的组件：

在所谓的“智能组件”（根据 React）中处理操作，它是控制组件和受控组件的共同祖先。对于小型组件来说，这是一个很好的解决方案，但事实并非如此。

在 Vuex 存储中分离常用逻辑和数据。我建议你这样做。

【讨论】：

感谢您的回复，但它没有回答我的任何问题。你能解释一下 Vuex 如何解决与其他组件通信的问题吗？

@Xvs 简而言之，它就像一个全局变量，每个组件基本上都可以从中读取/写入。如果您需要详细的解释，请阅读文档。 Vuex 似乎是您问题中最简单的解决方案。但是，如果需要，您也可以只通过每个子节点传递数据，这避免了 Vuex，尽管不那么可维护。