麻烦老师看下对嘛?还有关于作用域的改变能详解一下嘛?谢谢

<!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','red')
      }
     },
     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(){
        //需要把this作为一个保存,防止下面function的this作用域发生了变化
              var this_=this
              //监听bus的改变
              this.bus.$on('twoChange',function(msg){
                       this_.curClass = msg;

              })
       }
    })

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

</html>

gsl003 2021-05-25

源自：vue基础入门 4-10 编程练习

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2021-05-25 13:54:51

同学你好，点击“组件2”，“组件3”的背景变为粉色了，不符合要求。建议修改：在组件2的点击事件中触发twoChange事件时，传递的类名为green。如下：

因为普通函数中的this指向调用该函数的对象，方法虽然在当前组件中的定义的，但是在另一个组件中触发调用的，导致函数内部的this并不是指向当前组件，所以需要在函数外提前保存this指向才可以实现效果，可以结合下图理解：

祝学习愉快~

收起回答

gsl003 提问者 #1

谢谢老师,明白了

我换了Es6的方式,好像就不会出现作用域被改变的情况,是为什么呢

//方法一:需要做this保存
var this_=this
this.bus.$on('threeChange',function(msg) {
      	this_.curClass = msg;
})
//方法二:不需要做this保存
this.bus.$on('twoChange',(msg) => {
       this.curClass = msg;

})

2021-05-25 13:59:47