Vue组件化--兄弟组件之间通信

兄弟组件之间通信：通过共同祖辈组件

通过共同的祖辈组件搭桥，$parent或$root

// 父 home
<template>
    <div class="home">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
        <Brother msg="Brother" ></Brother>
    </div>
</template>

<script>
    import HelloWorld from "@/components/HelloWorld.vue";
    import Brother from "@/components/Brother.vue";

    export default {
        name: "Home",
        components: {
            HelloWorld, Brother
        }
    }
</script>

// 子 HelloWorld 
<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: "HelloWorld",
        props: { msg: String },
        mounted () {
            this.$parent.$on('mua', (val) => {
                console.log(val) // 把brother数据传给HelloWorld
            })
        }
    }
</script>

// 子 Brother
 <template>
    <div class="brother">
        <h1 @click="$parent.$emit('mua', '把brother数据传给HelloWorld')">{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: "Brother",
        props: { msg: String }
    }
</script>