Vue非父子组件进行传值（详细）

vue非父子组件怎么传值呢，今天我用自己的实例来告诉大家。

我有一个地图控件，还有一个导航菜单（element-ui），如下图所示：

地图相关的方法写在地图控件中（长度测量），想在点击导航菜单中的按钮实现长度测量。

两个组件独立，怎么让他们来产生关系呢？

举个例子：现实生活中两个毫不相关的人怎么产生依赖关系呢？

                     1.通过某件事建立联系。（Vue中的父子控件）

                     2.通过一个中间人。（自定义Appliction可以贯穿全局使用）

这里我们使用全局的一个变量。

我们创建一个myApp在所有组件中都可以使用。

在导航菜单组件中添加：

在地图控件中添加：

结果：

这样就实现了非子父控件的交互访问。

具体应该如何使用让自己的代码更加规范可维护有待研究。