javascript - Vue 通过 props 和 "this"回调

Question

通常，当你在vanilla JS中的按钮上注册事件监听器时，如果你传递一个使用“this”关键字的回调函数，并且它不是一个箭头函数，那么当该函数被执行时，“this”将引用按钮元素，你必须使用 .bind() 方法来克服这个问题。但是，当您将像“props”这样的回调函数从父组件传递到子组件，并在那里使用它时，并且该函数还使用“this”关键字，为什么子组件中的“this”引用了父 vue 实例而不是子 vue 实例？ vue 在幕后使用一些绑定(bind)吗？谁能解释一下吗？我有这个教程，其中有父组件和子组件以及 prop 的用例，它是使用“this”的回调函数:

// Parent component
    <template>
      <div class="component">
        <h1>The User Component</h1>
        <p>I'm an awesome User!</p>
        <button @click="changeName">Change my Name</button>
        <p>Name is {{ name }}</p>
        <p>Age is {{ age }}</p>
        <hr />
        <div class="row">
          <div class="col-xs-12 col-sm-6">
            <app-user-detail
              :myName="name"
              @nameWasReset="name = $event"
              :resetFn="resetName"
              :userAge="age"
            ></app-user-detail>
          </div>
          <button id="buton">Buton</button>
          <div class="col-xs-12 col-sm-6">
            <app-user-edit :userAge="age" @ageWasEdited="age = $event"></app-user-edit>
          </div>
        </div>
      </div>
    </template>

    <script>
    import UserDetail from "./UserDetail.vue";
    import UserEdit from "./UserEdit.vue";

    export default {
      data: function() {
        return {
          name: "Max",
          age: 27
        };
      },
      methods: {
        changeName() {
          this.name = "Anna";
        },
        resetName() {
          console.log(this);
          this.name = "Max";
        }
      },
      components: {
        appUserDetail: UserDetail,
        appUserEdit: UserEdit
      },
      mounted() {
        document.getElementById("buton").addEventListener("click", this.resetName);
      }
    };
    </script>

    <style scoped>
    div {
      background-color: lightblue;
    }
    </style>

// Child component
<template>
  <div class="component">
    <h3>You may view the User Details here</h3>
    <p>Many Details</p>
    <p>User Name: {{ switchName() }}</p>
    <p>User Age: {{ userAge }}</p>
    <button @click="resetName">Reset Name</button>
    <button @click="resetFn()">Reset Name</button>
  </div>
</template>

<script>
import { eventBus } from "../main";

export default {
  props: {
    myName: {
      type: String
    },
    resetFn: Function,
    userAge: Number
  },
  methods: {
    switchName() {
      return this.myName
        .split("")
        .reverse()
        .join("");
    },
    resetName() {
      this.myName = "Max";
      this.$emit("nameWasReset", this.myName);
    }
  },
  created() {
    eventBus.$on("ageWasEdited", age => {
      this.userAge = age;
    });
  }
};
</script>

Answer 1

Vue 中对 props 所做的就是将它们传递下来并将它们附加到子组件实例。

不执行其他类型的绑定(bind)，因此上下文 (this) 仍将是父级

我建议使用events而不是像 React 中那样传递 Function props。

Events更像 Vue(几乎是惯例，因为这是 Vue 开发人员在进行父子通信时首先要寻找的)，它们将更容易跟踪，并且事件的上下文将从头开始变得清晰。