Vue组件之间的数据传递
2018-03-21 13:42
666 查看
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单。这次我们就来聊一聊平级组件之间的通信。
在Vue2.0子父组件通信这篇文章聊到过无论是父向子传值还是子向父传值,都需要一个中间介质。对于平级组件来说其实也一样,他们也需要一个中间介质来作为一个中央事件总线,我们了解到这个之后就开始来写个Demo吧。App.vueApp.vue一 .我们先来创建中央事件总线,在src/assets/下创建一个eventBus.js,内容如下(注意后缀为.js)
eventBus.jseventBus中我们只创建了一个新的Vue实例,以后它就承担起了组件之间通信的桥梁了,也就是中央事件总线。二 . 创建一个firstChild组件,引入eventBus这个事件总线,接着添加一个按钮并绑定一个点击事件
firstChild.vue我们在响应点击事件的sendMsg函数中用$emit触发了一个自定义的userDefinedEvent事件,并传递了一个字符串参数
PS:$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。三 . 我们再创建一个secondChild组件,引入eventBus事件总线,并用一个p标签来显示传递过来的值
secondChild.vue我们在mounted中,监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数
PS:
mounted:是一个Vue生命周期中的钩子函数,简单点说就类似于jQuery的ready,Vue会在文档加载完毕后调用mounted函数。
$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发,回调函数会接收所有传入事件触发函数($emit)的额外参数。四 . 在父组件中,注册这两个组件,并添加这两个组件的标签
App2.vue保存所有修改的文件,然后打开浏览器窗口,内容如下(css请自行处理)
点击向组件传值按钮,我们可以看到传值成功
总结:创建一个事件总线,例如demo中的eventBus,用它作为通信桥梁
在需要传值的组件中用bus.$emit触发一个自定义事件,并传递参数
在需要接收数据的组件中用bus.$on监听自定义事件,并在回调函数中处理传递过来的参数
相关文章推荐
- vue 组件之间数据传递
- vue 组件之间数据传递(七)
- vue.js 组件之间传递数据
- Vue.js实战之组件之间的数据传递
- Vue 爬坑之路(二)—— 组件之间的数据传递
- vue.js 组件之间传递数据
- Vue基础知识之组件及组件之间的数据传递(五)
- VUE快速入门新的——组件之间传递数据(1. Prop)
- vue.js 组件之间传递数据
- Vue---组件之间的数据传递
- vue.js 组件之间传递数据
- Vue 爬坑之路(二)—— 组件之间的数据传递
- Vue —— 组件之间的数据传递
- Vue 组件之间的数据传递
- Vue中组件之间数据的传递的示例代码
- vue2.0 组件之间的数据传递
- vue 兄弟组件之间传数据之通过父组件来传递
- vue.js组件之间的通讯-----父亲向儿子传递数据,儿子接收父亲的数据
- vue.js组件之间传递数据的方法
- Vue 爬坑之路(二)—— 组件之间的数据传递