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

Question

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

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

我的应用如下：

Mapview
    Map
    Controls
    Options
        Optionpanel1
        Optionpanel2
        ...

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

如果我将选项嵌套在Map中并使用：myProp =“ prop”向下传递，然后在Options中将其在props中声明并绑定到Optionpanel1，则实际上可以将所需的属性传递给下一行作为道具。但是，正如我前面提到的，我不想在视觉上嵌套的嵌套元素会导致大量问题，例如鼠标单击掉入。元素是否甚至需要嵌套在彼此内部以定义父子关系？ 我希望组件交换只读数据，而Y在DOM中不是X的子级。而且，即使这样嵌套组件不会引起视觉问题，沿途必须在每个组件中注册并绑定它似乎也不很烦吗？

我不明白为什么简单地从另一个组件中读取内容会如此困难。似乎开始Vue引起了应该解决的问题？我在这里丢失了某些东西还是正在以一种完全错误的方式看待这个问题？

谢谢。

Answer 1

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

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

2. 用于分隔Vuex存储中的常见逻辑和数据。我建议您这样做。