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传递数据

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