熟悉了 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 来进行处理。