vue兄弟组件通信，被堵住了，憋得难受

Question

兄弟组件之间通信失败，求大神就帮助

Answer 1

如果要在非父子组件通信，要通过 event-bus 来通信

具体见文档 https://cn.vuejs.org/v2/guide...

Answer 2

为什么

说白了，你没弄明白组件的作用域，你在一个组件 A 内 $on 一个事件，在另外一个组件 B 内 $emit 这个事件，这是行不通的，这是因为组件 A 和组件 B 的作用域不同，组件 A 内的定义事件，只能在组件 A 内被 emit , 同样的，组件 B 内 emit 一个事件，必须提前在组件 B 内先 on 对应的事件。

解决办法

1. 新建一个 vm 的实例作为 event bus，var vm = new Vue({}), 在一个组件内 vm.$on(), 另外一个组件内 vm.$emit(), 由于 on 和 emit 都是在同一个 vm 实例上操作，就解决了上面的问题。关于这点，可以看这篇文章： https://segmentfault.com/a/11...

2. 如果逻辑不复杂，直接选择根组件作为 event bus， this.$root.$on() 和 this.$root.$emit()。

Answer 3

Answer 4

vue 非父子组件通信

Answer 5

创建一个js文件,新建一个vue实例

//bus.js
import Vue from 'vue'
export defualt new Vue()

把这个js文件分别引入到两个组件中

import bus from bus.js
//用新的vue实例调用$on 和 $emit 
bus.$on...
bus.$emit...

Answer 6

然后把this改成Vm就可以了

Answer 7

没注册事件总线吧 、
或者监听没执行

Answer 8

作用域都不同，在第一个组件中on的事件，怎么可以在另一个组件中取得呢，
要不就确定同一个父组件，要不就on的事件设为全局的

Answer 9

你这种可以很简单的解决掉，使用Vuet来进行状态管理吧.

import Vue from 'vue'
import Vuet, { mapModules, mapRules } from 'vuet'

Vue.use(Vuet)

const vuet = new Vuet({
  // 实例的选项，详情往下看
})
vuet.addModules('test', {
  data () {
    return {
      count: 0
    }
  },
  fetch () {
    this.count = 1000
  },
  plus () {
    this.count++
  },
  reduce () {
    this.count--
  },
  modules: {
    // 可以添加子模块，会自动继承父模块的名称：路径 = 父模块名称/子模块名称
  }
})

const App = {
  mixins: [
    mapModules({
      test: 'test' // { 别名： '模块路径' }
    })
  ],
  template: `
    <div>
      <div class="count">{{ test.count }}</div>
      <button @click="test.plus">plus</button> 
      <button @click="test.reduce">reduce</button> 
      <button @click="test.reset">reset</button> 
      <button @click="test.fetch">fetch</button> 
    </div>
  `
}

export default new Vue({
  el: '#app',
  vuet,
  render (h) {
    return h(App)
  }
})

Answer 10

多看文档,文档里的this.$emit不是你这样用的

父组件
    <com-child @pp="fn"></com-child>
    ...
    methods:{
        fn(){}//父组件的pp事件被触发后执行这里
    }
子组件
    this.$emit('pp')//子组件里出发定义在身上的pp事件