前言
Vue的v-model指令和.sync修饰符都可以做到父子组件之间数据的双向绑定,那么它们都是如何实现的呢?又有什么区别呢?下面通过父子组件间相互传值来给大家讲解。
tips:
父组件—>子组件:自定义属性
子组件—>父组件:自定义事件
一、v-model指令
Vue源码中v-model指令实现步骤很复杂,这里给大家举个例子,可以很快明白其中的原理。v-model可以用在输入框、下拉框等的双向绑定上,那么当在输入框上使用v-model时,这个指令绑定的是输入框的固有属性——value,通过input事件,就可以监听到输入框的输入事件,从而达到双向绑定的效果。
1.代码演示
代码如下(示例):
找一个vue项目中,在src/components文件夹下新建Com.vue文件,然后在App.vue中注册为子组件。
Com.vue
<template>
<div>
{{ 'count的值是:' + value }}
<!--通过一个input的自定义事件来修改父组件中的count-->
<button @click="$emit('input', value - 1)">-1</button>
</div>
</template>
<script>
export default {
// 通过自定义属性拿到父组件中的count值
props: {
value: {
type: Number,
required: true
}
}
}
</script>
App.vue
<template>
<div>
<Com v-model="count"></Com>
<!--v-model指令就相当于-->
<!--将子组件需要的count数值传递过去,监听自定义事件来修改count的数值-->
<!--<Com :value = "count" @input = "val => count = val"></Com>-->
</div>
</template>
<script>
import Com '@/components/Com.vue'
export default {
name: 'App',
data() {
return {
count: 50
}
},
components: {
Com
}
}
</script>
<style></style>
2.结果展示
当点击-1的按钮后,可以点开vue调试工具,查看视图与vue中的数据是否保持一致。
二、.sync修饰符
.sync修饰符的实现模式和v-model指令很相似,如果你懂得了v-model的实现原理,那么相信这个你也可以很快掌握。
1.代码演示
代码如下(示例):
在src/components目录下新建一个Comm.vue组件,并在App.vue组件中注册为子组件。
Comm.vue
<template>
<div>
<p>{{ 'a的值是:' + a }}</p>
<!--通过自定义事件修改父组件中的num-->
<button @click="$emit('update:a', a + 1)">+1</button>
<p>------------------</p>
<p>{{ 'b的值是:' + b }}</p>
<button @click="$emit('update:b', b - 1)">-1</button>
</div>
</template>
<script>
export default {
props: {
a: {
type: Number,
required: true
},
b: {
type: Number,
required: true
}
}
}
</script>
App.vue
<template>
<div>
<Comm :a.sync="num" :b.sync="count"></Comm>
<!--相当于父组件将num值通过自定义属性传递给了子组件-->
<!--子组件要修改num值,通过自定义的update事件来修改-->
<!--<Comm :a="num" @update:a="val => num = val" :b="count" @update:b="val => count = val"></Comm>-->
</div>
</template>
<script>
import Comm from '@/components/Comm.vue'
export default {
name: 'App',
data() {
return {
num: 100,
count: 50
}
},
components: {
Comm
}
}
</script>
<style></style>
2.结果展示
同样的还是观察两个数值是否同时发生变化。
三、区别
想必大家看完两个示例代码后,就大概知道区别了。
- 绑定次数
v-model只能通过value值来作为自定义属性来给子组件传值,一个组件也只能使用一次v-model指令。
.sync修饰符,可以自定义自定义属性的名字,所以可以父子传值使用.sync修饰符可以双向绑定多次。
总结
今天就给大家分享到这里,有什么疑问,欢迎各位小伙伴评论区一起讨论,Fighting~