迎接接见我的个人博客：http://www.xiaolongwu.cn

媒介

先说一下什么是事宜总线，实在就是定阅宣布者情势；

比方有一个bus对象，这个对象上有两个要领，一个是on（监听，也就是定阅），一个是emit（触发，也就是宣布），我们经由过程on要领去监听某个事宜，再用emit去触发这个事宜，同时挪用on中的回调函数，如许就完成了一次事宜触发；

这是一种设想情势，和言语没有关系；

假如不太相识什么是定阅宣布者情势，请移步看这篇文章JavaScript设想情势–观察者情势（宣布者-定阅者情势）

在现实开辟中，每每最贫苦的就是种种组件之间的传值题目；假如应用事宜总线就会让这件事变变得很简朴；

vue自带事宜总线的短板

我们都晓得在vue被实例化以后，他就具有了充任事宜总线对象的才能，在他上面挂了两个要领，是$emit和$on；

而vue文档说的很邃晓，$emit会触发当前实例上的事宜，附加参数都邑传给监听器回调；

因为在现实工作中，我们都是以组件的情势开辟，每一个组件就是一个实例；

所以应用vue自带的总线才能有很大的局限性，最多只能从子组件触发到父组件中，而不能在非父子组件之间传值；

所以这时候，我们就需要有一个全局的事宜总线对象，让我们挂载监听事宜和触发事宜；

举个例子，子组件向父组件传值；父组件向子组件传值很简朴，我们这里不说

// 子组件中
<template>
  <div>
    <span>{{child}}</span>
    <input type="button" value="点击触发" @click="send">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        child: '我是子组件的数据'
      }
    },
    methods: {
      send () {
      // 假如传多个值就用逗号离隔 a, b, c
        this.$emit('fromChild', this.child)
      }
    }
  }
</script>

// 父组件
<template>
  <div>
    <span>{{name}}</span>
    // 在父组件中监听 fromChild事宜
    <child @fromChild="onFromChild"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      onFromChild: function (data) {
        // data就是子组件传过来的值
        // 假如传过来多个值就用逗号离隔去吸收 data1, data2, data3
        this.name = data
      }
    }
  }
</script>

完成全局事宜总线对象的几种体式格局

体式格局一，也是我本身运用的体式格局（引荐运用，简朴）

也许思绪是 ：在main.js，也就是进口文件中，我们在vue的原型上增加一个bus对象；

详细完成体式格局以下：

下面的组件A和组件B可所以项目中恣意两个组件

//在mian.js中
Vue.prototype.bus = new Vue()  //如许我们就完成了全局的事宜总线对象

//组件A中，监听事宜
this.bus.$on('updata', function(data) {
    console.log(data)  //data就是触发updata事宜带过来的数据
})

//组件B中，触发事宜
this.bus.$emit('updata', data)  //data就是触发updata事宜要带走的数据

体式格局二，轻微有点贫苦，但也很轻易明白

也许的完成思绪： 新建一个bus.js文件， 在这个文件里实例化一下vue；然后在组件A和组件B中离别引入这个bus.js文件，将事宜监听和事宜触发都挂到bus.js这个实例上，如许就能够完成全局的监听与触发了

写个例子

bus.js文件

// bus.js文件
import Vue from 'vue'
export default new Vue()

组件A

// 组件A ，监听事宜send
<template>
  <div>
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: ''
      }
    },
    created() {
      let _this = this
      // 用$on监听事宜并接收数据
      Bus.$on('send', (data) => {
        _this.name = data
        console.log(data)
      })
    },
    methods: {}
  }
</script>

组件B

// 组件B， 触发事宜send
<template>
  <div>
    <input type="button" value="点击触发" @click="onClick">
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elValue: '我是B组件数据'
      }
    },
    methods: {
        // 发送数据
      onClick() {
        Bus.$emit('send', this.elValue)
      }
    }
  }
</script>

如许我们就完成了一个简朴非父子组件之间的传值。

我的个人博客地点：http://www.xiaolongwu.cn

github资本地点：vue — 非父子组件传值，事宜总线（eventbus）的运用体式格局

我的CSDN博客地点：https://blog.csdn.net/wxl1555

假如您对我的博客内容有迷惑或质疑的处所，请在下方批评区留言，或邮件给我，配合进修提高。

邮箱：wuxiaolong802@163.com