场景： 子组件是一个input或者textarea，父组件传值到子组件用于回显。
问题：最后提交数据的时候，没有取到填写的值。
问题原因： 由于vue父组件到子组件是“单向数据流”，但是input又使用了v-model双向绑定数据，在数据发生变化的时候，没有通知父组件也改变对应的数据，就导致子组件维护的数据一直都是父组件流进来的值，刚好传进来的是空，所以提交的时候就为空。
解决方法：子组件接收的的值用computed来进行维护 set方法中使用
$emit('changeProps', newValue)通知父组件也更新传进来的值（我想在watch中应该也可以解决，但是并没有尝试过）
贴上代码:
// 子组件
<template>
<input
v-model="value"
type="number"
style="text-align:right;"
onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
>
</template>
<script>
export default {
props: {
resultInfo: {
type: String,
default: '',
}
},
computed: {
value: {
get() {
if(this.resultInfo) {
return this.resultInfo
}
return ''
},
set(newValue) {
this.$emit('changeInputString', newValue)
}
}
},
}
</script>
// 父组件
<template>
<input-string
:result-info="trouble.resultInfo"
@changeInputString="changeInputString($event, trouble)"
/>
</template>
<script>
export default {
method: {
changeInputString(e, trouble) {
trouble.resultInfo = e
},
}
}
</script>
