Vue 组件中 v-mode 的本质以及实现方式
# 1、v-model 本质
允许一个自定义组件在使用
v-model
时定制prop
和event
。默认情况下,一个组件上的v-mode
l 会把value
用作prop
且把input
用作event
,但是一些输入类型比如单选框和复选框按钮可能想使用value
prop
来达到不同的目的。使用model
选项可以回避这些情况产生的冲突。其实本质上,v-model
是v-bind
以及v-on
配合使用的语法糖,例如在vue
中:
<input v-model="value" />
<!-- 就是相当于 -->
<input :value="value" @input="value=$event.target.value " />
1
2
3
2
3
# 2、不用 v-model 使用正常父子通信
<!-- parent -->
<template>
<div class="parent">
<p>我是父亲, 对儿子说: {{sthGiveChild}}</p>
<Child @returnBack="turnBack" :give="sthGiveChild"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
},
methods: {
turnBack(val) {
this.sthGiveChild = val;
}
}
}
</script>
<!-- child -->
<template>
<div class="child">
<p>我是儿子,父亲对我说: {{give}}</p>
<a href="javascript:;" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
props: {
give: String
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
</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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。
# 3、使用 v-model 时
<!-- parent -->
<template>
<div class="parent">
<p>我是父亲, 对儿子说: {{sthGiveChild}}</p>
<Child v-model="sthGiveChild"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
}
}
</script>
<!-- child -->
<template>
<div class="child">
<p>我是儿子,父亲对我说: {{give}}</p>
<a href="javascript:;" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
props: {
give: String
},
model: {
prop: 'give',
event: 'returnBack'
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
</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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
其实默认情况下,一个组件上的 v-model
会把 value
用作 prop
且把 input
用作 event
。上边的子组件等价于以下内容。
<!-- child -->
<template>
<div class="child">
<p>我是儿子,父亲对我说: {{value}}</p>
<a href="javascript:;" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
props: {
value: String
},
methods: {
returnBackFn() {
this.$emit('input', '还你200块');
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 4、核心代码内容
model: {
prop: 'someProp', //自定义的动态值,默认为:value。
event: 'someEvent' //自定义事件名,与下面的$emit事件对应,默认input。
}
this.$emit('someEvent', [returnValueToParent])
1
2
3
4
5
2
3
4
5
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13