1.父組件向子組件通信（porps）

// 父組件parent.vue
<template>
    <child :sendInfo="info"></child>
</template>
<script>
import Child from ‘@/components/Child.vue‘
export default {
    components: {
        ‘child‘: Child
    },
    data() {
        return {
            info: "hello"
        }
    }
}
 
</script>

// 子組件child.vue
<template>
    <span>{{sendInfo}}</span>
</template>
<script>
export default {
    props:["sendInfo"],
    data() {
        return {
            
        }
    }
}
</script>

2.子組件向父組件通信（this.$emit和v-on）

// 子組件child.vue
<template>
    <span @click="sendEvent">子組件向父組件</span>
</template>
<script>
export 
 
default {
    data() {
        return {
            msg: "love",
        }
    },
    methods:{
        sendEvent() {
            this.$emit("sendMsg", this.msg)
        }
    }
}
</script>

// 父組件parent.vue
<template>
    <child v-on:sendMsg="receiveEvent"></child>
</template>
<script>
import Child from 
 
‘@/components/Child.vue‘
export default {
    components: {
        ‘child‘: Child
    },
    data() {
        return {
            
        }
    },
    methods:{
        receiveEvent(data) {
            console.log(data)
        }
    }
}
</script>

3.任意組件之間通信（bus）

詳見 http://www.cnblogs.com/sangzs/p/8472327.html

4.其他通信方式(refs)

vue組件通信