我正在用 Vue 编写一个应用程序，我很难理解组件层次结构，即父子关系以及如何传递数据。
我有一个包含地图的视图，该地图又具有一些覆盖在地图顶部的导航控件和选项。现在，我希望这些控件能够操作地图，而不必将按钮嵌套在实际地图中，因为这会导致严重的显示问题(例如，单击缩放按钮会穿过按钮，然后单击其下方的下一个元素(。
我的应用如下所示：
Mapview
Map
Controls
Options
Optionpanel1
Optionpanel2
...
现在，Optionpanel1 中的 HTML 输入元素需要控制 Map 中的某些内容，而 Map 实际上并不是它的父组件。此外，Map 中的一些数据需要传递到 Optionpanel1，以便它知道要控制什么。更糟糕的是，Options 中的某些内容还需要将某些内容传递给 Optionpanel1，因此，即使事件总线允许向上通信，也无法解决我需要将数据从父级传递到间接子项以及不是子项的组件的问题。
如果我将选项嵌套在 Map 中并使用 ：myProp="prop" 传递它，然后在选项中，在 props 中声明它并绑定到 Optionpanel1，在那里它再次声明为 prop，我实际上可以将所需的属性传递到行下。但正如我之前提到的，嵌套我不想在视觉意义上嵌套的元素会导致鼠标点击失败等大量问题。元素是否需要相互嵌套才能定义父子关系？ 我希望组件交换只读数据，而 Y 不是 DOM 中 X 的子级。此外，即使像这样嵌套组件不会导致视觉问题，在此过程中必须在每个组件中注册和绑定它似乎不是很烦人吗？
我不明白为什么简单地从另一个组件读取某些内容如此困难。似乎 Vue 正在引起一个它应该解决的问题？我在这里错过了什么还是我以完全错误的方式看待它？
提前谢谢。
基本上，您有 2 个选项来控制复杂组件：
-
处理所谓的"智能组件"(就 React 而言(中的操作，这是控制和受控组件的共同祖先。对于小组件来说，这是一个很好的解决方案，但事实并非如此。
-
分离 Vuex 存储中的公共逻辑和数据。我建议你这样做。