Vue学习笔记：使用bus.js 进行兄弟组件间的通信

Vue学习笔记：使用bus.js 进行兄弟组件间的通信

大家对vue父子组件间的通信传递都非常熟悉了呢，今天给大家分享一下vue兄弟组件间的通信！

一、建立bus.js

import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue();

export default bus;

二、兄组件

通过$emit 向兄弟组件传参

<script>
    import bus from "./bus";
    export default {
        name: "Header",
        data(){
            collapse:true
        },
        methods: {
          // 侧边栏折叠
          toggleCollapse() {
              this.collapse = !this.collapse;
              bus.$emit("collapse", this.collapse);
          },
        }
    }
</script>

三、弟组件

通过$on 获取兄弟组件传递来的参数

<script>
    import bus from "./bus";
    export default {
        name: "Header",
        data(){
            collapse:false
        },
        created(){
            bus.$on("collapse", msg => {
                this.collapse = msg;
            });
        }
    }
</script>

bus.js 用途
1 组件间的通讯，传承 （组件必须引入bus.js）；
2 结合route路由对象，keep-alive 使用，开启多标签页数据缓存方案；

专注前端互助，分享！现邀你一起共同加入我们的社区！行业内推，知识学习，应有尽有，欢迎加入！