美文网首页前端开发
vue-bus实现兄弟组件通讯

vue-bus实现兄弟组件通讯

作者: 小伙子太认真 | 来源:发表于2019-05-17 12:23 被阅读203次

一、为什么要使用vue-bus?

学习vue的开发者都知道,父子组件的直接的通讯直接使用vue提供的props属性和emit方法。props接受来自父组件的参数,emit将子组件的参数传递给父组件。这样一来父子组件之间的参数传递就得到了解决。(之前做项目的时候看到$parent和$children也可以进行父子组件和兄弟之间的参数传递,但是不提倡,原因在于如果组件想要替换位置就有问题)。

那么问题来了,兄弟组件如何进行通讯?有哪些方法

1、vuex全局状态管理

2、bus总线机制/发布订阅者模式/观察者模式

两者相比较,前者适用于大型项目的开发,如果项目业务没那么复杂,推荐使用bus来进行解决这类问题。

二、vue-bus如何使用?

第一步:使用npm install vue-bus --save

第二步:在main.js进行全局注册

第三步:在一个页面引用两个兄弟组件

第四步:使用emit进行参数传递

第五步:在created或mounted生命周期钩子,执行事件监听。最后记得将触发的事件销毁,不然会出现点击多次触发的情况。

三、bus总线机制/发布订阅者模式/观察者模式

比如有一个bus对象(中央事件总线),这个对象上有两个方法,一个是on(监听,也就是订阅),一个是emit(触发,也就是发布),就好比我们订阅报纸,到报社去付钱,才知道你要订阅的。

观察者模式是用来监听数据变化,改变视图层。


有什么解释的不好的,希望帮我指正,万分感谢。

对你有帮助的给个赞

相关文章

  • vue-bus实现兄弟组件通讯

    一、为什么要使用vue-bus? 学习vue的开发者都知道,父子组件的直接的通讯直接使用vue提供的props属性...

  • 兄弟组件通讯

    eventBus 定义eventBus eventBus的原理是引入一个新的vue对象,分别调用这个对象的事件发布...

  • vue组件的使用

    props和$emit 组件间通讯和自定义事件 父子通讯 props $emit兄弟组件或者隔代组件使用自定义事件...

  • react 组件通讯的三种方式

    一、父子组件传值 注意:函数组件和类组件是不同的接收方式的 二、子传父通讯 三、兄弟组件通讯

  • Vue中组件通信(eventBus)

    在vue项目中,父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦。这时,使用eventBus...

  • vue 相关知识点

    侦听器初始化深度监听 全局监听事件 也可实现兄弟组件通讯 如果页面显示的数据为对象时如何判断是否有数据 父组件...

  • iOS:组件化的三种通讯方案

    组件化 本文主要介绍组件化常用三种通讯方式. 常⽤的三种组件化通讯方案 组件化通信方案组件化最重要的是兄弟模块的通...

  • Vue兄弟组件通信(VueX)

    在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就...

  • vue中组件之间的通信方式?

    vue组件的通讯方式一般分为三类:父子组件,兄弟组件,跨层级组件 父子组件props on ref listene...

  • Vue父子组件通讯传值

    Vue父子组件通讯传值 父组件往子组件传值 子组件与父组件通信 方式1 采用中间件作为通讯中转站实现子组件往父级组...

网友评论

    本文标题:vue-bus实现兄弟组件通讯

    本文链接:https://www.haomeiwen.com/subject/iczgaqtx.html