麻烦老师看看这个写法和注释可以吗?如果可以可以置顶一下参考,谢谢

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./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">
        <one></one>
        <two></two>
    </div>
    <script>
        /* bus模式,bus是借用给所有组件用来挂靠事件和触发事件的 */
        Vue.prototype.bus = new Vue();
        /* 组件1,组件3嵌套在组件1的模版中成为组件1的子组件 */
        Vue.component('one', {
            template: `<div><three></three></div>`
        })
        /* 组件2  */
        Vue.component('two', {
            /* 设定组件2模版参数校验和默认值 */
            props: {
                content: {
                    type: String,
                    default: "组件2"
                }
            },
            /* 设定组件2模版的默认样式 */
            data() {
                return {
                    activeclass: 'green'
                }
            },
            template: `<button @click="handleclicktwo" :class="[activeclass]">{{content}}</button>`,
            /* 设定组件2模版中点击事件的方法,利用bus模式给中间bus挂在一个事件,事件名为changethree(点击这个事件(通过bus的$on触发点击),会把组件3中的样式名从red改为了green(green是利用bus的$emit的第二个参数传递)) */
            methods: {
                handleclicktwo: function () {
                    this.bus.$emit('changethree', 'green')
                }
            },
            /* 先用一个变量this_记录组件2对象的所有信息(为了等下改变组件2中原有的样式名),因为mounted钩子中的bus会触发changtwo事件(该事件是组件3利用bus.$emit()传递过来的red替换组件2中的green)*/
            mounted() {
                var this_ = this;
                this.bus.$on('changetwo', function (color) {
                    this_.activeclass = color;
                })
            }
        })
        /* 组件3 */
        Vue.component('three', {
            props: {
                content: {
                    type: String,
                    default: "组件3"
                }
            },
            data() {
                return {
                    activeclass: ''
                }
            },
            template: `<button @click="handleclickthree" :class="[activeclass]">{{content}}</button>`,
            methods: {
                handleclickthree: function () {
                    this.bus.$emit('changetwo', 'red')
                }
            },
            mounted() {
                var this_ = this;
                this.bus.$on('changethree', function (color) {
                    this_.activeclass = color;
                })
            }
        })
        var vm = new Vue({
            el: "#app"
        })
    </script>
</body>

</html>
语言】突出显示