我有一个简单的测试组件,模板如下所示:
<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 处理程序,然后在其他地方设置它们(我仍然不明白如何但现在还无法获得。
根据我们的讨论,这里问题的根源在于将
name
声明为属性。目的是 name
是一个内部值,仅用于导出 message
。既然如此,手表就没有必要了,电脑就可以了。
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: {
num: Number
}
})
export default class TestComponent extends Vue {
name: string;
num: number;
get message(){
return "Hello " + this.name + " " + this.num;
}
}
这是因为 name 变量尚未初始化,因此在“this”上尚不存在。如果它被初始化为任何值,那么就会为其创建一个 proxyGetter 并且手表将会工作。