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

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

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

我的应用程序如下所示：

Mapview
    Map
    Controls
    Options
        Optionpanel1
        Optionpanel2
        ...

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

如果我将选项嵌套在Map中并使用：myProp=prop向下传递它，然后在Options中，在props中声明它并绑定到Optionpanel1，在那里它再次声明为prop，那么我实际上可以向下传递所需的属性。但正如我前面提到的，嵌套我不希望在视觉意义上嵌套的元素会导致大量问题，比如鼠标点击失败。为了定义父子关系，元素是否需要相互嵌套？ 我希望组件能够交换只读数据，而不需要Y是DOM中X的子元素。此外，即使这样的嵌套组件不会导致视觉问题，在一路上必须在每个组件中注册和绑定它，这不是很烦人吗

我不明白为什么仅仅从另一个组件中读取某些内容会如此困难。似乎Vue正在引发一个它应该解决的问题？我是不是遗漏了什么，还是我的看法完全错了

---

提前感谢。

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

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

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

---

谢谢你的答复，但它没有回答我的任何问题。你能解释一下Vuex如何解决与其他组件通信的问题吗？@Xvs简言之，它就像一个全局变量，每个组件基本上都可以读取/写入。如果您需要详细的解释，请阅读文档。Vuex似乎是解决您的问题的最简单的解决方案。但如果需要，您也可以继续通过每个孩子传递数据，这避免了Vuex，尽管它不那么可维护。