typescript - 在不相关的 VueJS Watcher 中使用“type:Function”的道具会改变“this”的范围

Question

对 Vue 有点新，目前使用的是 Vue 2.5.17 和 Typescript 3.7.2。

我在我的单个文件组件中遇到了一个奇怪的问题，其中 Function 类型 prop 的声明改变this了看似无关的 Watcher 的范围。

这是我进行任何更改之前的工作代码。此时，如果我将鼠标悬停this在处理程序中的关键字上，VSCode 会告诉我它指的是 VueInstance（以及我创建的所有属性、数据和方法），正如预期的那样。

export default Vue.extend({
  name: 'myWidget',
  props: {
    myArrList: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      selectReason: null
    };
  },
  watch: {
    myArrList: {
      immediate: true,
      deep: true,
      handler() {
        if (Object.keys(this.myArrList).length === 0) {
          this.selectReason = null;
        } else {
          const content = Object.keys(this.myArrList)[0];
          this.selectReason = this.myArrList[content][0].Activity); //get first object
        }
      }
    }
  }

我想创建一个回调 prop 函数来将一些数据传递给父组件。当我添加这个道具时（就在 myArrList 声明下）：

onShow: {
  type: Function,
  required: true
}

即使没有实际使用道具，整个处理程序也会中断。对 now 的每个引用都this指向String | WatchOptionsWithHandler<any>并且我收到一条错误消息，指出类型字符串上不存在 Property x。

为什么会发生这种情况，我能做些什么来解决它？奇怪的是，如果我将函数更改为 Array 或其他任何东西，它可以使用正确的this引用。然而，即使它只是一个声明，函数似乎也完全破坏了它。

标签： typescriptvue.js

Answer 1

我不知道为什么会这样，但是如果您想将一些数据传递给父组件，正确的做法是在您想要更新父组件时使用自定义事件，并在父组件中设置事件处理程序查看更多这里