Vue2.0子同级组件之间数据交互方法

 更新时间:2018年02月28日 14:17:37   作者:wjq_smile  
下面小编就为大家分享一篇Vue2.0子同级组件之间数据交互方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

熟悉了Vue.js的同级组件之间通信,写此文章,以便记录。

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述。

使用NPM及相关命令行工具初始化的Vue工程,目录结构如下

接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样

一、我们先来创建中央事件总线,在src/assets/下创建一个eventBus.js,

内容如下(eventBus中我们只创建了一个新的Vue实例,以后它就承担起了组件之间通信的桥梁了,也就是中央事件总线。)

二、 创建一个firstChild组件,引入eventBus这个事件总线,接着添加一个按钮并绑定一个点击事件

1、我们在响应点击事件的sendMsg函数中用$emit触发了一个自定义的userDefinedEvent事件,并传递了一个字符串参数

2、$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

三、 我们再创建一个secondChild组件,引入eventBus事件总线,并用一个p标签来显示传递过来的值

1、我们在mounted中,监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数

2、mounted:是一个Vue生命周期中的钩子函数,简单点说就类似于jQuery的ready,Vue会在文档加载完毕后调用mounted函数。

3、$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发,回调函数会接收所有传入事件触发函数($emit)的额外参数。

四、在父组件中,注册这两个组件,并添加这两个组件的标签

保存所有修改的文件,然后打开浏览器窗口,内容如下(css请自行处理)

 

点击向组件传值按钮,我们可以看到传值成功

 

总结:

1、创建一个事件总线,例如demo中的eventBus,用它作为通信桥梁

2、在需要传值的组件中用bus.$emit触发一个自定义事件,并传递参数

3、在需要接收数据的组件中用bus.$on监听自定义事件,并在回调函数中处理传递过来的参数

另外:

1、兄弟组件之间与父子组件之间的数据交互,两者相比较,兄弟组件之间的通信其实和子组件向父组件传值有些类似,其实他们的通信原理都是相同的,例如子向父传值也是$emit和$on的形式,只是没有eventBus,但若我们仔细想想,此时父组件其实就充当了bus这个事件总线的角色。

2、这种用一个Vue实例来作为中央事件总线来管理组件通信的方法只适用于通信需求简单一点的项目,对于更复杂的情况,Vue也有提供更复杂的状态管理模式Vuex来进行处理。

以上这篇Vue2.0子同级组件之间数据交互方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue如何根据url下载非同源文件

    vue如何根据url下载非同源文件

    我们在开发过程中,有时会遇到后端返回的文件地址和我们的网站不是同源的情况下,本文就介绍了vue如何根据url下载非同源文件,感兴趣的可以了解一下
    2021-06-06
  • vue滚动插件better-scroll使用详解

    vue滚动插件better-scroll使用详解

    这篇文章主要为大家详细介绍了vue滚动插件better-scroll,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • vue移动端写的拖拽功能示例代码

    vue移动端写的拖拽功能示例代码

    这篇文章主要介绍了vue移动端写的拖拽功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • 实例讲解v-if和v-show的区别

    实例讲解v-if和v-show的区别

    今天小编就为大家分享一篇关于实例讲解v-if和v-show的区别,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 发布订阅模式在vue中的实际运用实例详解

    发布订阅模式在vue中的实际运用实例详解

    订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象。这篇文章主要介绍了发布订阅模式在vue中的实际运用,需要的朋友可以参考下
    2019-06-06
  • vue+axios+mock.js环境搭建的方法步骤

    vue+axios+mock.js环境搭建的方法步骤

    本篇文章主要介绍了vue+axios+mock.js环境搭建的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue项目中播放rtmp视频文件流的方法

    vue项目中播放rtmp视频文件流的方法

    这篇文章主要介绍了vue项目中播放rtmp视频文件流 ,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • 详解elementUI中input框无法输入的问题

    详解elementUI中input框无法输入的问题

    这篇文章主要介绍了详解elementUI中input框无法输入的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue2.0学习之axios的封装与vuex介绍

    vue2.0学习之axios的封装与vuex介绍

    最近在研究Vuex2.0,搞了好几天终于有点头绪了。下面这篇文章主要给大家介绍了关于vue2.0学习之axios的封装与vuex的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-05-05
  • vue多级多选菜单组件开发

    vue多级多选菜单组件开发

    这篇文章主要为大家分享了vue多级多选菜单组件开发案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10

最新评论