Vue非父子组件进行传值(详细)

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

我有一个地图控件,还有一个导航菜单(element-ui),如下图所示:

Vue非父子组件进行传值(详细)

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

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

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

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

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

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

Vue非父子组件进行传值(详细)

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

在导航菜单组件中添加:

Vue非父子组件进行传值(详细)

在地图控件中添加:

Vue非父子组件进行传值(详细)

结果:

Vue非父子组件进行传值(详细)

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

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