4-10 编程练习代码提交

来源：4-10 编程练习

MiMicccc

2021-09-16 14:41:38

<!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">
    <!-- 在此补充代码 -->
    <one></one>
    <two></two>
  </div>
  <script>
    // 在此补充代码
    Vue.prototype.bus = new Vue();
    // 组件1
    Vue.component('one', {
      template: '<div><thr></thr></div>'
    })

    // 组件2
    Vue.component('two', {
      template: '<button :class=[curStyle] @click="btnClick">组件2</button>',
      data: function () {
        return {
          curStyle: 'green'
        }
      },
      methods: {
        btnClick: function () {
          this.bus.$emit('thrChange', 'green')
        }
      },
      mounted: function () {
        this.bus.$on('twoChange', (msg) => {
          this.curStyle = msg
        });
      }
    })

    // 组件3
    Vue.component('thr', {
      template: '<button :class=[curStyle] @click="btnClick">组件3</button>',
      data: function () {
        return {
          curStyle: ''
        }
      },
      methods: {
        btnClick: function () {
          this.bus.$emit('twoChange', 'red')
        }
      },
      mounted: function () {
        this.bus.$on('thrChange', (msg) => {
          this.curStyle = msg
        });
      }
    })

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

</html>

写回答

2回答

好帮手慕久久

2021-09-16

已采纳

同学你好，代码正确，问题解答如下：

在使用this之前，首先要知道this的指向有哪些情况，比如事件处理函数中，通常this指向“绑定事件的元素”（特殊情况除外）、全局中，this指向window、“对象.方法( )”的形式，this指向“点”前面的对象......。这些内容，建议同学自己总结一下，并记录到笔记中。初步判断this指向谁后，就可以正常使用this了，此时可以不用考虑this是否改变了，就正常写代码，一旦代码发生了报错，或者效果有异，再考虑一下是不是this指向变了。可以通过打印this，判断this是否改变，比如下面的例子：

我们想打印按钮的innerHTML属性，代码写成如下样子：