1、父子通信

通过v-bind和props

props使得父子之间形成一种单向数据流，父元素更新的时候，子元素的状态也会随之改变。

//这是父组件
<template>
      <div id="app">
            <child :bbb='ccc'></parent>
            <el-button type="primary" @click="dian">点我改变APP组件的数据</el-button>
      </div>
</template>

export default {
      name: "App",
      components:{
        child//注册组件
      },
      data(){
        return {
          ccc:'我是APP组件的ccc'
        }
      },
      methods:{
        dian(aa){
        //修改数据时，子组件会自动同步
          console.log(aa)
          this.ccc = '我改变了ccc'
        }
      }
};

//这是子组件
<template>
      <div>
          <div>{{bbb}}</div>
      </div>
</template>
<script>
export default {
      props:['bbb'],//props接受，同时也可验证父组件传过来的值
}

2、子父通信

$emit

通过参数的形式来传递

//父
<template>
      <div id="app">
            <child :aaa='ddd' @dianL='z_click'></child>
      </div>
</template>

<script>

export default {
      name: "App",
      components:{
        child//注册组件
      },
      data(){
        return {
          ddd:'我是ddd'
        }
      },
      methods:{
        z_click(val){
          console.log(val)
        }
      }
};
</script>

//子
<template>
      <div>
            <div>{{aaa}}</div>
           <el-button type="primary" @click="z_dian">我是子组件的按钮</el-button>
      </div>
</template>
<script>
export default {
      props:['bbb','aaa'],//props同时也可验证父组件传过来的值
      methods:{
            z_dian(){
                  this.$emit('dianL','我是子组件的数据')
            }
      }
}
</script>

3、非父子

（1）、EventBus

通过实例化一个Vue对象( 比如bus = new Vue() )作为母线，在组件中通过事件将参数传递出去(bus.$emit(event, [...args]) )，然后在其他组件中再通过bus( 这里按照刚前面实例化Vue对象后的叫法 )来监听此事件并接受参数( bus.$on(event, callback) )。

bus.js

import Vue from 'vue'
const bus = new Vue()
export default bus

child1

<template>
      <div>
           <el-button type="primary" @click="child1_val"></el-button>
      </div>
</template>
<script>
import bus from '../EventBus'
export default {
      methods:{
            child1_val(){
                  bus.$emit('change','666');
            }
      }
}
</script>

child2

<template>
      <div>

      </div>
</template>
<script>
import bus from '../EventBus'
export default {
      created(){
            bus.$on('change',msg =>{
                  console.log(msg)
            })
      }
}
</script>

（2）、全局EventBus

将bus写在main.js（此方法借鉴于其他大神，不对的地方希望大家提出）

main.js

const EventBus = new Vue();

Object.defineProperties(Vue.prototype, {
    $bus: {
        get: function () {
            return EventBus
        }
    }
})

child1

<template>
      <div>
           <el-button type="primary" @click="child1_val">666</el-button>
      </div>
</template>
<script>
export default {
      methods:{
            child1_val(){
                  this.$bus.$emit('change','666');
            }
      }
}
</script>

child2

<template>
      <div>

      </div>
</template>
<script>
export default {
      created(){
            this.$bus.$on('change',msg =>{
                  console.log(msg)
            })
      }
}
</script>

(3)、vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（后面会详细描述与用法）

vue组件通信