Vue 兄弟组件通信的方法

小云云
发布: 2018-01-02 13:08:48
原创
1846 人浏览过

项目中,我们经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex。下面简单介绍一下使用传统方法,实现父子组件通信的方法。本篇文章主要介绍了Vue 兄弟组件通信的方法(不使用Vuex),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

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

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

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

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

a.vue


  
登录后复制

第二步,我们要在父组件中去监听这个自定义事件,去触发对应的方法,并接受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


  
登录后复制

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

子父:

  1. 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件

  2. 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法

  3. 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

父子:

  1. 子组件在props中创建一个属性,用以接收父组件传过来的值

  2. 在子组件标签中添加子组件props中创建的属性,把需要传给子组件的值赋给该属性

相关推荐:

vue中的event bus非父子组件通信详解

Vue.js组件通信中的几种姿势具体分析

深入探讨Vue.js组件和组件通信

以上是Vue 兄弟组件通信的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!