Vue组件之间数据传递之eventbus的使用方法

蔚落 2021-07-27 02:21 646阅读 0赞

eventbus事件总线的方式,可以进行非父子组件之间的通信,除Vuex以为比较便利的一种组件之间数据通信的方式。

下面让我们来通过一个例子了解一下，是如何通过eventbus通信的（没有用vue-cli而是直接引入的vue.js）

跳过父组件,直接进行祖父和孙子组件之间通信

  1. 首先我们再html页面创建一个Vue实例为eventbus

    // eventbus是随意起的变量名
    var eventbus = new Vue();

  2. 接下来我们再创建一个vue实例为vm,我们再祖父组件中定义个点击方法handler,并通过Vue实例方emit发送事件名和需要传递的数据内容。(emit前一定要加$$这个是Vue中自带的事件,固定写法,不然会报错)

    var vm = new Vue({ 

    1. el:'#app',
    2. methods:{ 
    3.      handler(){ 
    4.          eventbus.$emit('aaa','grandfather to grandson')
    5.          //aaa 为事件名, grandfather to grandson是需要传递的内容
    6.      }
    7.  },
    8.  components:{ 
    9.      son
    10.  }

    })

  3. .在孙子组件中通过Vue实例中的$on来监听事件和接收到的数据,msg就是传递过来的数据,也是自己起的名字,你可以根据需求起名。
    注意: 通常挂载监听是在vue生命周期的created或mounted中,具体情况还是看项目需求,这里不多赘述.

    mounted(){ 

    1.  eventbus.$on('aaa',(msg)=>{ 
    2.       console.log(msg)
    3.  })

    }

  4. 下面看一下具体代码,这里的father组件只是进行演示,不通过father组件,grandson也能拿到grandfather中的值







  5. 运行结果如下:
    在这里插入图片描述

总结:这种方法虽然组件之间通信比较方便,但是缺点是数据不支持响应式,工作项目中这个还是用的不多的.

发表评论

表情：
评论列表 （有 0 条评论，646人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 组件之使用props传递数据

    组件不仅仅是要把模板的内容进行复用，更重要的是组件间的通信。通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染。

    Dear 丶Dear 丶/ 0 赞/ 1022 阅读