Vue 兄弟组件通信的方法（不使用Vuex）

项目中，我们经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题，但在一些小型的项目中，我们就没有必要去引入vuex。下面简单介绍一下使用传统方法，实现父子组件通信的方法。

简单实例：我们在a组件中点击按钮，将信息传给b组件，从而使b组件弹出。

主要的思路就是：先子传父，在父传子

首先我们在 a.vue 组件中，给按钮botton绑定一个handleClick事件，事件中我们通过 this.$emit(）方法去触发一个自定义事件，并传递我们的参数。

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

a.vue






.adiv{
 width: 400px;
 height: 200px;
 border: 1px solid #000;
 margin: 0 auto;
}

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

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

到此，整个过程还没有结束，只是完成了一半。接下来我们要完成父子组件传值，将a组件的信息在传给b组件。

在< bPage > 标签中绑定islog 属性，动态绑定data中的login 字段,在我们通过lisLogFn 方法拿到 ‘data'之后，我们要判断 data 传过来的数据，根据判断结果去改变data（）中的数据，从而将数据传递给b组件

App.vue

最后，b组件中需要创建props，定义一个isLog 属性，这个属性就是我们传过来的数值。然后我们在计算属性中处理这个数据，最终供b组件使用。示例中，我们在v-show="isLogin" 中用来控制弹窗是否打开。

切记！不能直接使用这个props，一定要经过computed处理，原因我引用vue官方说明

单向数据流

b.vue






 .bdiv{
 width: 200px;
 height: 200px;
 border: 1px #000 solid;
 margin: 0 auto;
 }

总结：想要实现兄弟组件传值，一定要首先熟悉子父，父子之间的传值。

子父：

父子：

文中示例 github 地址：https://github.com/enjoy-pany/vue-emit

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。