Vue2.0组件之间通信

Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单。笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信。


首先我们先搭好开发环境,我们先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦)

环境搭建步骤:

  • 打开git ,运行 npm install --global vue-cli 这是安装vue的命令行
  • vue init webpack vue-demo 这是vue基于webpack的模板项目
  • cd vue-demo 进入vue-demo文件夹
  • npm install 安装package.json中依赖的node_modules
  • npm run dev 运行该项目

Vue2.0子父组件通信这篇文章聊到过无论是父向子传值还是子向父传值,都需要一个中间介质。对于平级组件来说其实也一样,他们也需要一个中间介质来作为一个中央事件总线,我们了解到这个之后就开始来写个Demo吧。

我们在git上运行 npm run dev 的命令后,浏览器中会打开一个vue基于webpack构建工具的一个模板项目,接着我们在编辑器中进入Demo,我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样

App.png

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

eventBus.png

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

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

firstChild.png

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

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

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

secondChild.png

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

PS:

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

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

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

App2.png

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

browser.png

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

browser2.png


总结:
  • 创建一个事件总线,例如demo中的eventBus,用它作为通信桥梁
  • 在需要传值的组件中用bus.$emit触发一个自定义事件,并传递参数
  • 在需要接收数据的组件中用bus.$on监听自定义事件,并在回调函数中处理传递过来的参数

** 题外话:**

1.看过笔者上一篇Vue2.0子父组件通信这篇文章的同学可以感觉到,组件之前的通信其实和子组件向父组件传值有些类似,其实他们的通信原理都是相同的,例如子向父传值也是$emit和$on的形式,只是没有eventBus,但若我们仔细想想,此时父组件其实就充当了bus这个事件总线的角色。

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


作者:PengL链接:http://www.jianshu.com/p/d946bd7c26f4來源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
时间: 2024-10-13 06:21:17

Vue2.0组件之间通信的相关文章

vue2.0组件之间的传值--新入坑,请指教

prop down   emit up 嘿嘿    如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) "down"->指的是下的意思,即父组件向子组件传值,用props:"up"->指的是上的意思,即子组件想父组件传值,用emit. 1.子组件向父组件的传值: Child.vue <template> <div class="child"> <h1>子组

vue2.0 组件之间的数据传递

组件间的数据传递// 父组件<template><div class="order"><dialog-addpro v-on:closedialog="close" :proinfo="proinfo"></dialog-addpro></div></template><script>import daddpro from '../../daddpro' expo

通信vue2.0组件

vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html <div id="app1"> <i>注意命名规定:仅在html内使用my-message</i> <child my-message="组件内部数据传递"></child&

EventBus作为组件之间通信

1.为何要使用EventBus? 一般我们在不同activty等组件之间通信的时候,都用到了如下的模式: 就是定义一个接口,需要关注该事件的地方来实现这个接口.然后事件触发的地方来注册/取消注册这些对该事件感兴趣的控件,比如如下文章描述的情况: 使用Event Bus模式解耦Android App组件间通信 这样做的问题也是显而易见的,就是不同组件之间往往耦合的比较厉害,越来越多的接口也维护很麻烦,这样就需要用到EventBus模式来解决组件之低耦合的间通信 2.EventBus类库介绍 Eve

Vue2.0组件注册

//全局注册: Vue.component("my-component",{ template:'<div>A custom component!</div>' }); /*交换位置会报错----创建组件必须在根实例化之前*/ //创建根实例: new Vue({ el:"#app" }) --------- //局部注册: new Vue({ el: "#app1", components: { // <my-zu

Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信

Vue自定义组件: 组件:就是一个大的对象:new Vue({})就是一个组件定义一个组件:1.全局组件: <div id="box"> <aaa></aaa> </div> var Aaa=Vue.extend({ template:'<h3>我是一个标题</h3>' }); Vue.component('aaa',Aaa); a)给自定义的组件添加数据: data必须是函数的形式,函数必须返回一个对象(json

vue2.0组件通信各种情况总结与实例分析

Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html <div id="app1"> <i>注意命名规定:仅在html内使用my-message</i> <child my-message="组件内部数据传递"></child> </div> //js

Vue2.0组件间数据传递

Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有的后代 Vue2.0后$dispatch(),$broadcast()被弃用,见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换 1,父组件向子组件传递场景:Father上一个输入框,根据输入传递到Child组件

Prism 4 文档 ---第9章 松耦合组件之间通信

当构建一个大而负责的应用程序时,通用的做法时将功能拆分到离散的模块程序集中.将模块之间的静态引用最小化.这使得模块可以被独立的开发,测试,部署和升级,以及它迫使松散耦合的沟通. 当在模块之间通信时,你需要知道不同通信方式之间的区别,那样你才能确定哪种方式对于你的特定的场景最合适,Prism类库提供了以下几种通信方式: 命令.当希望对于用户的交互马上采取动作时使用. 事件聚合.用于ViewModel,展现层,或者控制之间没有所期望的直接动作时. 区域上下文.使用它可以提供宿主和宿主区域的View之