vue.js 非父子组件怎么通信

Question

参照网上找的代码但是我这没有效果(网上的代码如下)：

新建一个bus.js内容为下：
import Vue from 'vue'
export default new Vue

a.vue
import Bus from './bus.js'
在事件中触发 Bus.$emit('msg', 123)

b.vue
import Bus from './bus.js'
在created或mounted钩子中接收：
Bus.$on('msg', val => {

this.nnum = val

})

请问这种方式可以吗·？
有没有能给详细解释下的大神

Answer 1

以上新建bus的方式可以的，其实就是新建了一个vue实例，通过$on监听函数触发事件

Answer 2

bus_plugin.ts

import { Subject } from 'rxjs'
import Vue from 'vue'

const sub = new Subject<EventItem>()

interface EventItem {
  n: string;
  v: any;
}

const RxEvent = {
  install(Vue) {
    Vue.prototype.$rx_on = function (name: string, func: Function) {
      this.$subscribeTo(sub.filter(t => t.n === name).map(t => t.v), func)
    }

    Vue.prototype.$rx_emit = function (n: string, v) {
      sub.next({ n, v })
    }
  }
}

Vue.use(RxEvent)

---

main.js

import Vue from 'vue'
import Rx from 'rxjs/Rx'
import VueRx from 'vue-rx'
import 'bus_plugin.ts'

Vue.use(VueRx, Rx)

---

component.vue

export default {
  created() {
    this.$rx_on('event1', this.func1)
  },
  methods: {
    func1(v) {
      console.log(v)
    },
    emit() {
      this.$rx_emit('event1', 1)
    }
  }
}

Answer 3

官方文档

非父子组件的通信

有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

Answer 4

如果你指的是兄弟组件通信，狠狠戳?：
http://runjs.cn/code/k0nfythj

Answer 5

可以参考下我的这篇文章vue非父子组件之间通信 ，有问题可以继续沟通

Answer 6

这种方式可以的，但是需要修改一下，传值次数会从0增加，修改详解https://www.jianshu.com/p/fde...