项目中,我们经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex。下面简单介绍一下使用传统方法,实现父子组件通信的方法。
简单实例:我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出。
403_4@
主要的思路就是:
先子传父,在父传子
首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数。
示例中我们通过this.$emit() 去触发isLogFn 这个方法自定义事件,并将log 参数传递出去
a.vue
第二步,我们要在父组件中去监听这个自定义事件,去触发对应的方法,并接受a组件传过来的参数。此时我们就完成了子组件向父组件传值的过程。
示例中,
到此,整个过程还没有结束,只是完成了一半。接下来我们要完成父子组件传值,将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