Javascript 通过道具和“Vue回调”；这"；

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

//父组件
用户组件
我是一个很棒的用户

改名
名字是{{Name}

年龄是{{Age}


布顿
从“/UserDetail.vue”导入UserDetail；
从“/UserEdit.vue”导入UserEdit；
导出默认值{
数据：函数（）{
返回{
姓名：“Max”，
年龄:27
};
},
方法：{
changeName（）{
this.name=“Anna”；
},
resetName（）{
console.log（this）；
this.name=“Max”；
}
},
组成部分：{
appUserDetail:UserDetail，
appUserEdit:UserEdit
},
安装的（）{
document.getElementById（“buton”）.addEventListener（“单击”，this.resetName）；
}
};
div{
背景颜色：浅蓝色；
}
//子组件
您可以在此处查看用户详细信息
许多细节

用户名：{{switchName（）}}

用户年龄：{{userAge}

重置名称
重置名称
从“./main”导入{eventBus}；
导出默认值{
道具：{
我的名字：{
类型：字符串
},
resetFn：函数，
用户年龄：号码
},
方法：{
switchName（）{
返回这个.myName
.拆分（“”）
.reverse（）
.加入（“”）；
},
resetName（）{
this.myName=“Max”；
this.$emit（“nameWasReset”，this.myName）；
}
},
创建（）{
eventBus.$on（“年龄编辑”，年龄=>{
this.userAge=年龄；
});
}
};

对Vue中的

道具所做的一切就是将它们向下传递并附加到子组件实例

不会执行其他类型的绑定，因此上下文（
此
）仍将是父级

我建议使用函数道具，而不是像React那样传递函数道具

更像Vue（基本上是惯例，因为这是Vue开发人员在进行父子通信时首先要寻找的），它们将更易于跟踪，并且事件的上下文将从一开始就清晰可见。
在Vue中对
道具所做的一切就是将它们向下传递并附加到子组件实例

不会执行其他类型的绑定，因此上下文（
此
）仍将是父级

我建议使用函数道具，而不是像React那样传递函数道具

更像Vue（基本上是惯例，因为这是Vue开发人员在进行父子沟通时首先要寻找的），它们将更易于跟踪，并且事件的上下文将从一开始就清晰可见

// 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>