vue积累1_封装Input后如何使用v-model

此处环境是vue2

在组件A中使用了组件B, 并使用v-model传值
组件B中使用了input, 并使用了v-model传值
这里应该如何传值?

在组件B中, 如果input的v-model传的是value(此处的value是组件A传递过来的), 组件A的value依然无法改变. 因为组件B中的value是props, 是不能修改的.

那么问题来了. input本身的v-model是怎么修改外部的值?

前置知识 v-model 等于 v-bind + @input

使用v-model

<input v-model="age"/>

等价于 使用v-bind和@input

<input v-bind:value="age" @input="age=$event.target.value" />

v-model是语法糖, 实际上使用的v-bind + @input
上面的例子中本质上是通过input事件来修改外部age的值.

也就是说v-model传到组件B的value属性,在组件B中无法修改. 只能通过事件修改

程序改造

对程序进行如下改造

组件B中, 将input的事件跑出去.

<input  @input="$emit('input',$event.target.value)"/>

组件A中, 使用v-model

<MyInputB v-model="age"/>

这里能够通过input修改组件A的age值了, 但是还是有问题. 初始值age并没有传递给最里面的input.
在组件A中, 用一个新的属性接收, 再将这个属性传递给input.

<input v-model="internalValue"
			@input="$emit('input',$event.target.value)" />
...
...
data() {
	return {
		internalValue: this.value //此处的value是外层的v-model传递的初始值
	}
},

到这里,完成了初始值的传递. 完成了修改后, age跟着改变.

出现问题, 组件A修改age后, input中的值不改变.

input的值双向绑定的值是internalValue. 只需要修改internalValue就可以了.
例如:

//组件A
this.$refs.input_tgyName.setValue("111")

//组件B
<input ref="input" v-model="internalValue"
			@input="$emit('input',$event.target.value)" />
...
...
setValue(value) {
	this.$refs.input.value = value
	this.internalValue = value
}

有一个问题, 如何给input设置其他属性, 例如placeholder等

组件B中 使用v-bind=“$attrs” 将外层传递的所有属性绑定给input.

<input ref="input" v-bind="$attrs" v-model="internalValue" 
			@input="$emit('input',$event.target.value)" />

在组件A中

<MyInput ref="input_tgyName" v-model="form.tgyName" placeholder="推广员姓名"></MyInput>

完美解决.