我有一个简单的测试组件，模板看起来像这样：

<template>
  <div>
    <input type="text" v-model="name" class="form-control">
    <h5>{{ message }}</h5>
  </div>
</template>
<script src="./test.ts" lang="ts"></script>

字符串
组件TypeScript看起来像这样：

declare var Vue: typeof Function;
declare var VueClassComponent: any;

import { Component, Inject, Model, Prop, Watch } from "vue-property-decorator";

@VueClassComponent.default({
  template: require("./test.vue"),
  style: require("./test.sass"),
  props: {
    name: String,
    num: Number
  }
})
export default class TestComponent extends Vue {
  name: string;
  num: number;
  message: string = "";

  @Watch("name")
  protected onNameChanged(newName: string, oldName: string): any {
    console.log("setting " + oldName + " to " + newName);
  }

  mounted(this: any): void {
    console.log("mounted called");
    this.message = "Hello " + this.name + " " + this.num;
  }
}

型
当我在input框中输入时，@Watch（“name”）处理程序从未触发，但我确实在console中得到了以下错误：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name"

型
对于input框中输入的每个字符设置一次。我不知道在哪里设置了名称，因为我没有在任何地方设置它。虽然这是我的目标（更新名称），但我一直在阅读你不能直接更改值，你需要设置@Watch处理程序，然后在其他地方设置它们（我仍然不知道确切的 * 如何 *，但现在甚至不能得到它。