input封装为子组件 更改值报错

出现这个问题的原因是 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')就行