[JavaScript知识库]vue 兄弟组件eventbus.js的使用

1：eventbus.JS的使用场景

? ? ? ?父子传值可以用props解决。那么兄弟组件用什么传值呢？同时什么是兄弟组件呢？兄弟组件就是两个组件同时在一个组件里被引用，他们之间可以使用eventbus,js这个插件进行传值

? ? ? ? 应用场景如下：比如在一个统计数据组件里，我们需要两种数据。一个是表格数据，另外一个是图表形式，图表里的图的数据我们需要从表格里获取。那么这时我们就可以把表格里的数据传给图表，这是我们就需要用到兄弟组件evenbus.js进行传值。

2：eventbus.js的使用方法

? ? ? ? 第一步先在main.js引入

import Vue from 'vue';
import VueBus from 'vue-bus';
Vue.use(VueBus);

?我们创建三个组件：login.vue，hello.vue,Demo.vue。在login.vue中引入其他两个组件。

?2.1发送端和接收端

? ? ? ? 我们把Demo作为发送端，把Hello作为接收端。发送端使用this.$bus.emit('name','data')。

一个是名称，一个是数据。name是我们给这个传送的值的名称，data是我们发送的值的数据。

接收端使用this.$bus.on('name'? function(data))，name是我们接收的值的名称。function是个回调函数，接收的参数是的我们接收过来的值。

Demo,vue代码如下:

<template>
  <div>
    <el-button @click="sendMsg">按我进行传值</el-button>
  </div>
</template>

<script>
  
export default {
    data(){
        return{
             Amsg:'我是大帅哥'
        }
    },
    methods:{
      sendMsg(){
       console.log('你好')
        this.$bus.emit('changeMsg',this.Amsg)
      }
    }
}
</script>

<style>

</style>

Hello.vue的代码如下：

<template>
  <div>
    <div>{{msg}}</div>
    
    </div>
</template>

<script>
export default {
        data(){
            return{
                msg:'我是丑男'
            }
        },
        methods:{
            getMsg(){
                this.$bus.on('changeMs',data=>{
                    this.msg=data
                    console.log(data)
                })
            }
        },
        created(){
            this.getMsg()
        }
      
}
</script>

<style>

</style>

login的代码如下：

<template>
  <div>    
   
    <Demo></Demo>
    <Hello></Hello>
  </div>
</template>

<script>
import Hello from '../components/Hello.vue'
import Demo from '../components/Demo.vue'

export default {
components:{
    Hello,
   
    Demo
}

}
</script>

<style>

</style>

效果如下：

?

?