vue两个子组件之间如何不用vuex进行简单的通信？

Question

简单来说，就是一个子组件通过$emit来传一个object到父组件，但是父组件接收不到参数
比如一个简单的单页面应用，app.vue 文件里面通过 vue-router 引入了 a组件 和 b组件
代码大概如下

---

<div class='app'>
    <div class='nav'>
        <router-link to='/a'>前往a页面</router-link>
        <router-link to='/b'>前往b页面</router-link>
    </div>
    <div class='content'>
        <router-view></router-view>
    </div>    
</div>    

---

然后，现在点击 a组件 里面的一个按钮之后，
把一个对象传到 b组件 （不用vuex）
我的想法就是，点击了a组件的button之后，this.$emit一个事件，
然后把对象做为参数，一起传到app.vue ,
然后在app.vue 通过监听事件获取到 a组件 传来的事件和参数
然后 我试了一下在分别在app.vue的 .content 和 router-view 用v-on 来接收事件
发现在router-view能够成功接收到a组件传来的事件
然后试着console一下接收到的参数
发现输出undefined

---

代码大概如下：

---

      <!--app.vue-->
      <div class="view-wrapper">
        <router-view @tomodify="sendData(good)"></router-view>
      </div>

      //script in app.vue
        methods: {
          sendData (good) {
            this.agood = good
            console.log(this.agood)  //成功执行但是输出 undefined
          }
        }

---

    <!-- a组件 -->
    <button class="modifyBtn" @click="toModify(good)">修改</button>

    //script in a组件
    data () {
       toModify (good) {
         console.log(good)  //成功输出一个对象
         this.$emit('tomodify', [good])
       }
    }

---

希望各位大佬指教一下，很简单的问题但是搞了好久
appreciate。

Answer 1

你干脆安装一个vue-bus插件吧

npm install vue-bus

入口文件引入一下

import Vue from 'vue';
import VueBus from 'vue-bus';

Vue.use(VueBus);

A组件：

this.$bus.emit('myEvent', 'hello'); // 触发自定义事件传递数据

B组件：

this.$bus.on('myEvent', (myData) => {
    console.log(myData); // hello
}); 

Answer 2

简单点:
1.子emit到父
2.父prop到子

Answer 3

这种情况属于兄弟组件通讯，用event-bus是实现通讯即可。可以参考官方文档。
不过官方文档一笔带过，看不懂的话可以参考我的文章： vue兄弟组件event-bus通讯。文章有示例代码，如果有疑问欢迎交流

Answer 4

App.vue的router-view标签就是他们的父组件,你可以把数据存在那边然后prop随意给你的a,b组件