出现这个问题的原因是 input的v-model本身就是语法糖,本质是value props,因此需要在子组件中用别的值替代掉传入的props。
下面上代码
子组件的代码:
<template>
<view class="list-input">
<view class="left">
{{title}}
</view>
<view class="right">
<input type="text" v-model="msg" :placeholder="placeholderMsg" placeholder-style="font-size: 26upx"/>
</view>
</view>
</template>
<script>
export default {
props:{
inputMsg: {
type: String,
default: ""
},
placeholderMsg:{
type: String,
default: ""
},
title: {
type: String,
default: ""
}
},
watch:{
inputMsg(nval,oval){
if(nval!=oval){
this.msg = nval
}
},
msg(nval,oval){
if(nval!=oval){
this.$emit('input',nval)
}
}
},
data() {
return {
msg: ''
}
},
methods: {
}
}
</script>
父组件的代码:
<new-input v-model="info.name" title="姓名" :inputMsg="info.name" placeholderMsg="请输入姓名"></new-input>
父组件也需要加入 v-model ,子组件使用this.$emit('input')就行