原理
vue的v-model是一个十分强大的指令,它可以自动让input里的值自动和你设定的值进行绑定,它是如何实现的呢?
1.语法糖:使用v-model来进行数据双向绑定如下:
<input v-model="ying">
1
2.实际上是这样实现的:
<input v-bind:value="ying" v-on:input="ying=$event.target.value">
<a-input v-bind:value="ying" v-on:input="ying=arguments[0]"></a-input>
1
2
2
3.其实v-model只不过是一个语法糖而已,真正的实现靠的还是
- v-bind:绑定响应式数据
- 触发 input 事件 并传递数据 (重点)
方法
父子组件通信，都是单项的，很多时候需要双向通信。方法如下：
- 父组件使用：text.sync="aa" 子组件使用$emit('update:text', 'text改变后的值')
- 父组件传值直接传对象，子组件收到对象后可随意改变对象的属性，但不能改变对象本身。
- 父组件使用： v-model,子组件使用通过监听value和暴露input事件来实现v-model
- 父组件使用： v-model 子组件使用model
(1)使用sync
父组件:
<a-input :value.sync="text" ></a-input>
1
子组件:
<template>
<div>
<input v-model="currentValue" @input="handleModelInput">
</div>
</template>
<script>
export default {
props: {
value: [String,Number,Date],
},
methods: {
handleModelInput() {
this.$emit("update:value", this.currentValue);
}
},
watch: {
value(newValue) {
this.currentValue = newValue
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(2)使用v-model 子组件触发 input 事件 并传递数据，并对value进行监听
父组件:
<a-input v-model="text">
1
子组件:
<input v-model="currentValue" @input="handleModelInput">
props:{
value:[String,Number],
}
handleModelInput() {
this.$emit('change',this. currentValue)
}
watch: {
value(newValue) {
this.currentValue = newValue
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
(3)使用model prop属性 even事件change
父组件:
<a-input v-model="text">
1
子组件:
<template>
<div>
<input v-model="currentValue" @input="handleModelInput">
</div>
</template>
<script>
export default {
model: {
prop: 'value',
event: 'change'
},
props: {
value:[String,Number],
},
methods: {
handleModelInput() {
this.$emit('change', this.currentValue)
}
},
watch: {
value(newValue) {
this.currentValue = newValue
}
}
</script>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25