vue自定义组件使用v-model

剖析语法糖”v-model”,实现更快捷方便的父子传参。

v-model的实现原理

在input标签中绑定value值,并且在input方法触发的时候动态的修改这个值,即:

1
2
3
4
5
6
7
8
9
<input 
:value="val"
@input="updateValue($event.target.value)"/>

<script>
updateValue(val) {
this.val = val;
}
</script>

Ps:input事件为元素值修改时,实时的触发的事件;change事件为元素失去焦点后,值被修改的话触发的事件;
Pss:以上两个事件在使用js修改其值时都不会触发。

自定义组件使用v-model

首先自定义组件要在Prop中接收value,即v-model绑定的值,然后在需要修改v-model的值时,使用$emit主动触发父组件的input事件,传递参数就可以了,例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 父组件
<div>
<myInput :value="val" v-model="val"/>
</div>

// 子组件
<div>
<label>
<span>{{ label }}</span>
<input :value="value" @input="updateValue($event.target.value)"/>
</label>
</div>

<script>
name: 'myInput',
props: [
'label',
'value'
],
methods: {
updateValue(val) {
this.$emit('input', val);
}
}
</script>

同理,不止input元素,在其他组件想向父组件传参时,都可以使用input事件修改其值;

sync修饰符

vue2.3以上的版本,可以使用sync修饰符

父组件:

1
<component :title.sync="testTitle"></component>

子组件:

1
2
3
mounted() {
this.$emit('update:title', 'new title');
}

能够非常方便的修改父组件的状态。

坚持原创技术分享,您的支持将鼓励我继续创作!