Vue兄弟组件通信的方法(不使用Vuex) - 行业资讯 - 肥雀云

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

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

主要的思路就是:<强>先子传父,在父传子

首先我们在。vue组件中,给按钮波顿绑定一个handleClick事件,事件中我们通过这个。发出()美元方法去触发一个自定义事件,并传递我们的参数。

示例中我们通过。发出()美元去触发isLogFn这个方法自定义事件,并将日志参数传递出去

a.vue 　　　　　　& lt; template> 　　& lt; div类=癮div”比; 　　& lt; p>组件& lt;/p> 　　& lt;按钮类型=鞍磁ァ眝:点击=癶andleClick祝辞点击打开组件b弹窗& lt;/button> 　　& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　　　出口默认{ 　　方法:{ 　　handleClick () { 　　美元。排放(‘isLogFn’,‘日志’) 　　} 　　} 　　} 　　& lt;/script> 　　　　& lt; style> 　　.adiv { 　　宽度:400 px; 　　身高:200 px; 　　边界:1 px固体# 000; 　　保证金:0汽车; 　　} 　　& lt;/style> 　　　　之前　　　　

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

示例中,& lt; aPage @isLogFn=發isLogFn祝辞& lt;/aPage>监听isLogFn去触发我们在父组件中定义的方法lisLogFn,并拿到传过来的“日志”的数据,完成子父传值。

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

在& lt;bPage祝辞标签中绑定islog属性,动态绑定中数据的登录字段,在我们通过lisLogFn方法拿到“数据”之后,我们要判断数据传过来的数据,根据判断结果去改变()中数据的数据,从而将数据传递给b组件

App.vue 　　　　　　& lt; template> 　　& lt; div id=坝τ谩北? 　　& lt; aPage @isLogFn=" lisLogFn "祝辞& lt;/aPage> 　　& lt; bPage: isLog="登录"祝辞& lt;/bPage> 　　& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　　　从“进口aPage。/组件/a.vue ' 　　从“进口bPage。/组件/b.vue ' 　　　　出口默认{ 　　数据(){ 　　返回{ 　　登录:“假” 　　} 　　}，　　名称:“应用程序”, 　　组件:{ 　　aPage, 　　bPage 　　}，　　方法:{ 　　lisLogFn(数据){ 　　如果(data=https://www.yisu.com/zixun/=叭罩尽?{ 　　这一点。登录='真的' 　　} 　　} 　　} 　　} 　　& lt;/script> 　　　　& lt; style> 　　& lt;/style> 　　　　之前　　　　

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

切记!不能直接使用这个道具,一定要经过计算处理,原因我引用vue官方说明

单向数据流
　　

b.vue 　　　　　　& lt; template> 　　& lt; div类=癰div v-show”=癷sLogin”在我是组件B弹窗& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　出口默认{ 　　道具:[' isLog '), 　　数据(){ 　　返回{ 　　　　} 　　}，　　计算:{ 　　isLogin () { 　　如果这一点。isLog=='真的'){ 　　还真　　其他}{ 　　返回假　　} 　　} 　　} 　　} 　　& lt;/script> 　　　　& lt; style> 　　.bdiv { 　　宽度:200 px; 　　身高:200 px; 　　边界:1 px # 000固体; 　　保证金:0汽车; 　　} 　　　　& lt;/style> 　　　　之前　　　　

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

子父: 　　