Vue 子组件向父组件传值（不使用Vuex）

参考原文链接https://blog.csdn.net/panyang01/article/details/76222713

实现效果

点击放大镜实现地图的放大，以及左边列表的隐藏。

点击放大镜实现地图的缩小，以及左边列表的显示。

贴代码

此处的显示隐藏效果引用了vue提供的transition的封装组件，使用方法特别简单，vue参考文档:https://cn.vuejs.org/v2/guide/transitions.html

此处的代码引用了四个组件，这里涉及到的两个兄弟组件是    和  两个兄弟组件。

先看 中的代码

html: 

为放大镜绑定handleClick事件

js：

首先在data中定义一个show

通过改变show的bool值来切换地图的class从而改变地图的宽高

在hannleClick 方法中加通过改变show的bool值来切换地图的class从而改变地图的宽高

事件中我们通过 this.$emit(） 方法去触发一个自定义事件，并传递我们的参数。

示例中我们通过this.$emit() 去触发isLogFn 这个方法自定义事件，并将log 参数传递出去

第二步，我们要在父组件中去监听这个自定义事件，去触发对应的方法，并接受a组件传过来的参数。此时我们就完成了子组件向父组件传值的过程。

示例中， 监听isLogFn 去触发我们在父组件中定义的方法lisLogFn，并拿到传过来的 ‘log’ 数据。完成子父传值。

通过lisLogFn()这个自定义方法，我们就能拿到子组件传过来的值，这里我在子组件随意传来了一个值，通过判断如来控制show的改变，这样就完成了子组件想父组件的传值。