場景: 子組件是一個input或者textarea秀姐,父組件傳值到子組件用于回顯。
問題:最后提交數(shù)據(jù)的時候,沒有取到填寫的值。
問題原因: 由于vue父組件到子組件是“單向數(shù)據(jù)流”誓沸,但是input又使用了v-model雙向綁定數(shù)據(jù),在數(shù)據(jù)發(fā)生變化的時候壹粟,沒有通知父組件也改變對應(yīng)的數(shù)據(jù)拜隧,就導(dǎo)致子組件維護(hù)的數(shù)據(jù)一直都是父組件流進(jìn)來的值,剛好傳進(jìn)來的是空趁仙,所以提交的時候就為空洪添。
解決方法:子組件接收的的值用computed來進(jìn)行維護(hù) set方法中使用
$emit('changeProps', newValue)
通知父組件也更新傳進(jìn)來的值(我想在watch中應(yīng)該也可以解決,但是并沒有嘗試過)
貼上代碼:
// 子組件
<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>