vue Bus 总线组件间通信

缺乏、安全感 2022-04-02 08:52 274阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。

在实际运用中，一般将Bus抽离出来:

Bus.js

import Vue from 'vue'
    const Bus = new Vue()
    export default Bus

组件调用时先引入

组件1

import Bus from './Bus'
    
    export default {
        data() {
            return {
                .........
                }
          },
      methods: {
            ....
            Bus.$emit('log', 120)
        },
    
      }

组件2

import Bus from './Bus'
    
    export default {
        data() {
            return {
                .........
                }
          },
        mounted () {
           Bus.$on('log', content => { 
              console.log(content)
            });    
        }    
    }

但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信

实际运用二（推荐）：

当然也可以直接将Bus注入到Vue根对象中，

import Vue from 'vue'
    const Bus = new Vue()
    
    var app= new Vue({
        el:'#app',
    　　 data:{
    　　　　Bus
        }　　
    
    })

在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()来调用

转自：[https://www.cnblogs.com/fanlinqiang/p/7756566.html][https_www.cnblogs.com_fanlinqiang_p_7756566.html]

[Link 1]: https://www.captainai.net/jiangyu1013/
[https_www.cnblogs.com_fanlinqiang_p_7756566.html]: https://www.cnblogs.com/fanlinqiang/p/7756566.html