麻烦老师看下对吗? 关于作用域,组件2和组件3的this不同使用都可以达成,老师可以详解下嘛?谢谢

来源：4-10 编程练习

gsl003

2021-05-25 12:51:19

<!DOCTYPE html>
<html>

<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">
        <!-- 组件1和组件2是兄弟组件，组件1下有一个子组件，即：组件3。点击组件3时，改变组件2的背景颜色，点击组件2时，改变组件3的背景颜色 -->
        <one></one>
        <two></two>
    </div>
    <script>
    //在Vue的原型对象prototype上添加一个bus属性等于Vue的实例对象。
    Vue.prototype.bus = new Vue()

    //在组件1的template中添加组件3，让组件3作为组件1的子组件
    Vue.component('one',{
        template:'<p><three></three></p>',
    })

    //组件二
    Vue.component('two',{
        template:'<button  :class="curClass" @click="btnClick">组件2</button>',
        data: function () {
               return {
                 curClass: 'green'//设置组件2的样式
               }
           },
           methods:{
              btnClick:function(){
                     //使用this.bus.$emit给触发事件，直接传递类名'green'
                this.bus.$emit('twoChange','green')
              }
           },
           mounted:function(){
              //需要把this作为一个保存,防止下面function的this作用域发生了变化
              var this_=this
              //监听bus的改变
              this.bus.$on('threeChange',function(msg) {
                    this_.curClass = msg;

              })
       }
    })

    //组件三
    Vue.component('three',{
        template:'<button :class="curClass" @click="btnClick">组件3</button>',
        data: function () {
               return {
                 curClass: ''//设置组件3的样式
               }
           },
           methods:{
              btnClick:function(){
                          //使用this.bus.$emit给触发事件，直接传递类名'red'
                this.bus.$emit('threeChange','red')

              }
           },
           mounted:function(){
              //监听bus的改变
              this.bus.$on('twoChange',(msg) => {
                       this.curClass = msg;

              })
       }
    })

    var vm = new Vue({
        el: "#app",
    })
    </script>
</body>

</html>