兄弟组件之间的传递(事件车),点击变绿让兄弟组件中的颜色变成绿色;点击变红让兄弟组件中的颜色变成红色

252 阅读1分钟

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
<green></green>
<red></red>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let eventBus=new Vue;
    //定义两个兄弟组件
    let green={
        data(){
            return {
                color:'绿色',
            };
        },
        created(){
            //在created阶段,已经在绿色组件里面已经订阅了changeR事件了,点击变红的时候,在红色的那个组件里面触发发布执行
            eventBus.$on('changeR',this.changeRed);
        },
        methods:{
            changeRed(){
               this.color='红色';
            },
            fn(){
               eventBus.$emit('changeG');
            },
        },
        template:'<div>{{color}}<button @click="fn">变绿</button></div>'
    };
    let red={
        data(){
            return {
                color:'红色'
            }
        },
        created(){
            //在红色的组件中订阅,改变红色组件里面的初始颜色红色,在绿色的组件中点击(点击的时候发布eventBus.$emit())让它变成绿色
            eventBus.$on('changeG',this.changeGreen);
        },
        methods:{
            changeGreen(){
                 //在created阶段,已经把methods,data等挂载到实例上去了,所以在created可以调用
                 this.color='绿色'
            },
            fn(){
                 eventBus.$emit('changeR')
            },
        },
        template:'<div>{{color}}<button @click="fn">变红</button></div>'
    };
    let vm = new Vue({
        el: '#app',
        data: {},
        components:{
            green,
            red,
        }
    });
</script>
</body>
</html>

上图(初始场景)

点击以后(点击后的场景)

点击后最终的样子