美文网首页
vue兄弟组件之间通信--eventBus

vue兄弟组件之间通信--eventBus

作者: chenM_ | 来源:发表于2019-06-17 15:32 被阅读0次

原文地址

eventBus

eventBus单独的事件中心,用来管理组件之间的通信。

由于 Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的 Vue 实例来实现这个目的。然后在组件中,可以使用$emit, $on, $off 分别来分发、监听、取消监听事件。

一. 创建eventBus

其实就是创建一个js文件,默认导出一个vue实例

 import vue from 'vue';
 export default new vue();

二. 分发事件

bus.$emit(eventName,res);

三. 监听事件

bus.$on(eventName,res => {
  //do something
});

四.销毁监听

bus.$off(eventName);

使用案例:
父组件A,子组件BusB,Bus。BusB组件里有一个checkbox,当改变checkbox的checked状态的时候,BusC组件可以监听到状态改变然后做一些事情。

//bus.js
//创建一个空的vue实例 并导出
import vue from 'vue';
export default new vue();
//A组件
<template>
   <div class="bus-A">
   下面是两个兄弟组件:  
       <BusB />
       <BusC />
   </div>
</template>
<script>
//引入兄弟组件
import BusB from './BusB'
import BusC from './BusC'
export default{
   data(){
       return{
       }
   },
   components:{
       BusB,
       BusC
   }
}
</script>
//BusB 组件
<template>
    <div class="bus-B">
        组件B:
        <label>
        选择checkbox,可以触发组件BusC的监听事件<input type="checkbox" v-model="isChecked" @change="handleCheckbox">
        </label>
    </div>
</template>
<script>
import bus from '../../assets/bus.js';
export default{
    data(){
        return{
            isChecked:false
        }
    },
    methods:{
        handleCheckbox(){
            //分发'getCheckboxStatus'事件
            bus.$emit('getCheckboxStatus',this.isChecked);
        }
    }
 }
</script>

//BusC组件
<template>
    <div class="bus-C">
        组件BusC:
        <p>
        这里可以得到组件BusB的checkbox的值:{{isChecked}}
        </p>
    </div>
</template>
<script>
import bus from '../../assets/bus.js';
export default{
    data(){
        return{
            isChecked:false
        }
    },
    mounted(){
        this.getCheckboxStatus();
    },
    methods:{
        getCheckboxStatus(){
            //监听'getCheckboxStatus'事件
            bus.$on('getCheckboxStatus',res => {
                //监听到BusB组件的checkbox的状态 do something...
                this.isChecked = res;   
            })
        }
    },
    beforeDestroy(){
        //取消监听'getCheckboxStatus'事件
        bus.$off('getCheckboxStatus');
    }
}
</script>

当BusB,BusC组件之间通信的时候可以使用eventBus,不过我们也以使用状态管理Vuex,通过compunted&watch达到兄弟组件之间的通信,也是官网推荐的一种方式。但如果一个小型项目,没引入vuex,这个时候eventBus也是很不错的选择。


vue交流QQ群:576598452
<br />
<br />
点击加入vue交流QQ群:<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=4f949184519835439e62d3d185c478a67d666cd9b66925a16f329242d5a4f29e"><img border="0" src="https://user-gold-cdn.xitu.io/2019/6/14/16b562f50879b29d?w=90&h=22&f=png&s=1827" alt="vue交流群" title="vue交流群"></a>
<br />

相关文章

  • vue兄弟组件之间通信--eventBus

    原文地址 eventBus eventBus单独的事件中心,用来管理组件之间的通信。 由于 Vue 实例实现了一个...

  • vue事件总线EventBus

    vue组件有父子组件通信:props兄弟组件通信:可以使用vuex,还可以使用事件总线eventBus 使用方法:...

  • vue npm包的publish与install

    最近写了一个基础的Vue UI框架, 非常适合学习Vue基本知识,组件及Vue组件之间通信(涉及eventBus、...

  • 老生常谈——vue组件之间通信

    老生常谈的组件之间通信 vue组件之间的通信细分为三种情况:兄弟组件之间的通信,父组件向子组件传递数据,子组件向父...

  • vue - EventBus

    1.eventBus适用场景 目前了解到的eventbus一般比较适用于兄弟组件之间的通信; 两个兄弟组件有一个共...

  • Vue组件通信

    Vue组件通信 Vue组件关系可分为三大类: 父子组件 兄弟组件 跨级组件, 相应的组件之间的通信也分类三大类: ...

  • Vue组件通信

    总体来说,Vue中组件之间的通信场景如下图: 可以将其分为父子组件通信、兄弟组件通信、跨级组件通信。 1. 自定义...

  • vue Bus总线

    vue中我们经常遇到组件之间的通信,通常的通信方式有 父 → 子、子 → 父、兄弟组件 之间的通信。通常处理方式...

  • vue的简单状态管理模式-store(非vux)

    状态管理也就是数据状态管理,vue 应用程序的各组件之间经常需要进行通信,除了 v-on、EventBus 等通信...

  • Vue组件通信方式

    本文主要介绍关于Vue组件通信的四种方式,分别是父向子组件通信、子向父组件通信、非父子组件的EventBus通信、...

网友评论

      本文标题:vue兄弟组件之间通信--eventBus

      本文链接:https://www.haomeiwen.com/subject/jnwafctx.html