vue 组件通信传值

父子组件通信：

　　子组件

<template>
  <div>
    <h3 @click="alerrt"> 我是子组件一</h3>
    <span>{{parentMessage}}</span>
  </div>
</template>
<script>
  export default{
    props: ['parentMessage'],
    mounted() {
      // this.$emit('childEvent');
    },
    methods:{
      alerrt(){
        this.$emit('childEvent',{name:'zhangsan',age:10 });
      }
    }

  }
</script>
<style scoped>
</style>

父组件

<template>
  <div>
    <h2>父组件</h2>
    <span>父组件传递消息给子组件</span>
    <br>
    <router-view @childEvent="parentMethod" :parentMessage="parentMessage" />
    <!-- <Child-one :parentMessage="parentMessage"></Child-one> -->
    <button type="" @click='extendTest'>extend</button>
    <div id="extend"></div>
  </div>
</template>
<script>
  import ChildOne from './ChildOne'
  export default{
    components: {
      ChildOne
    },
    methods: {
      parentMethod({name,age}) {
        alert(this.parentMessage);
        console.log(this.parentMessage,name,age);
      },
      extendTest() {
        console.log('333');
        var Extend = Vue.extend({
          template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
          data: function () {
            return {
              firstName: 'Walter',
              lastName: 'White',
              alias: 'Heisenberg'
            }
          }
        })
        new Extend().$mount('#extend')
      },
    },
    data () {
      return {
        parentMessage: '我是来自父组件的消息aaaa'
      }
      
    }

  }
</script>
<style scoped>
</style>

兄弟组件通信：

在main,js里加

import Vue from 'vue'

window.eventBus = new Vue()；

在组件里

兄弟1组件：window.eventBus.$emit('函数名称', {参数 键：值});

兄弟2组件：

window.eventBus.$on('grouprecording',参数 =>{

　　//处理数据

})