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

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

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

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

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

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

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

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

var vm = new Vue({ 
        el:'#app',
        methods:{ 
             handler(){ 
                 eventbus.$emit('aaa','grandfather to grandson')
                 //aaa 为事件名, grandfather to grandson是需要传递的内容
             }
         },
         components:{ 
             son
         }
     })

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

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

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

<body>
        <div id="app">
            <son></son>
            <button @click="handler()">按钮</button>
        </div>
        <script>
            // eventbus是随意起的变量名
            var eventbus = new Vue();
    
            const grandson ={ 
                template:` <h2>hello world grandson</h2> `,
                mounted(){ 
                    eventbus.$on('aaa',(msg)=>{ 
                        console.log(msg)
                    })
                }
            }
    
            const father= { 
                template:` <div> <h1>hello world son</h1> <grandson> </grandson> </div> `,
                components:{ 
                    grandson
                }
    
            }
    
            var vm = new Vue({ 
                el:'#app',
                methods:{ 
                    handler(){ 
                        eventbus.emit('aaa','grandfather to grandson')
                    }
                },
                components:{ 
                    father
                }
            })
        </script>
    </body>

1.  运行结果如下:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70]: /images/20210726/29ff189eac9c445fb28b35b3d0e0ebe1.png