请老师看下代码和注释有没有问题

来源：4-10 编程练习

Nyakoonya

2020-12-06 17:48:19

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
    button {
        padding: 10px 20px;
        margin: 20px auto;
        border-radius: 5px;
        outline: none;
    }

    .red {
        background: pink;
    }

    .green {
        background: green;
    }
    </style>
</head>

<body>
    <div id="app">
        
        <compone></compone>
        <comptwo></comptwo>
    </div>
    <script>
    // 在此补充代码
    // bus总线，通过其挂靠和触发事件，传值
    Vue.prototype.bus = new Vue()
    // 创建组件1，将组件3作为组件1的模板嵌套在其中，成为组件1的子组件
    Vue.component('compone',{
        template:'<div><compthr></compthr></div>'
    });

    // 创建组件2，组件1的兄弟组件
    Vue.component('comptwo',{
        // 模板参数校验和默认值
        props:{
            content:{
                type:String,
                default:'组件2'
            }
        },
        //模板样式
        data(){
            return {
                activeClass:'green'
            }
        },
        template:'<button :class="[activeClass]" @click="clickTwo">{{content}}</button>',
        methods:{
            // 定义点击事件触发bus上的自定义事件，传递参数改变组件3样式
            clickTwo(){
                this.bus.$emit('changeThr','green');
            }
        },
        mounted:function(){
            // 监听bus上的自定义事件，接收参数，改变自己（组件2样式）
            this.bus.$on('changeTwo',(color) => {
                this.activeClass = color;
            })
        }
    })

    // 创建组件3
    Vue.component('compthr',{
        props:{
            content:{
                type:String,
                default:'组件3'
            }
        },
        // 定义模板和样式
        data(){
            return {
                activeClass:'',
            }
        },
        template:'<button :class="[activeClass]" @click="clickThr">{{content}}</button>',
        methods:{
            // 触发自定义事件，传值改变组件2样式
            clickThr(){
                this.bus.$emit('changeTwo','red')
            }
        },
        mounted:function(){
            // 监听自定义事件，接收参数改变自己（组件3）样式
            this.bus.$on('changeThr',(color) => {
                this.activeClass = color;
            })
        }
    })
    var vm = new Vue({
        el: "#app"
    })
    </script>
</body>

</html>