一、传值并直接操作

问题：如果对应组件中没有该属性或事件就会报错

<!--父组件-->
<template>
    <div>
        老爸：￥{{parentNum}} <button @click="papa()">老爸给儿砸零花钱</button>
       <!--ref 获取子组件的信息    :parent 自定义属性，将父组件暴露给子组件-->
        <Child ref="son" :parent="this"/>
    </div>
</template>

<script>
import Child from './child';
export default {
    name: 'parent',
    components: { Child },
    data(){
        return{
            parentNum: 100
        }
    },
    methods: {
        papa(){
            this.$refs.son.childNum++;
        }
    }
}
</script>

<!--子组件-->
<template>
    <div>
        儿砸：￥{{childNum}} <button @click="zaza()">儿砸管老爸要零花钱</button>
    </div>
</template>

<script>
export default {
    name: 'child',
    props: ['parent'],   //接收父组件传来的值
    data(){
        return{
            childNum: 0
        }
    },
    methods: {
        zaza(){
            this.parent.parentNum--;
        }
    }
}
</script>

二、emit / on

即使对应组件中没有该属性或事件，也不会报错

//组件发送方
<Child ref="son"/>
methods: {
  change(){
    this.$refs.son.$emit('onename',7);
  }
}

//组件接收方
created(){
  this.$on('onename',num=>{
    alert(num);
  })
},

兄弟组件通信

1. 一级一级找（孙子——老大——爷爷——老二—— 孙女），然后用父子组件通信的方式

2. 孙子——中央事件总线——孙女

在外部新建一个js文件（Bus.js）

 import Vue from 'Vue';
 export default new Vue();

组件儿子

<div @click="send"></div>
import bus from '@/components/Bus'; // 引入中央事件总线
methods: {
  send() {
      bus.$emit('info','erzi的info'); //触发事件
  }
}

组件女儿

import bus from '@/components/Bus'; // 引入中央事件总线
methods: {
  send() {
      bus.$on('info',function(msg){
          console.log("接收到："+msg);
      });
   }
}

组件通信

vuex