v-model
.sync 原理: 和 v-mode 极其类似 , 先了解 v-model
v-model 双向绑定指令就是一个 语法糖 , 本质上做了两件事情
- 1. 给子组件绑定一个 value 属性, 对应一个变量
- 2. 给子组件绑定一个 input 事件, 在事件处理函数中给变量赋值
父组件
<template>
<div>
<!-- v-model 原理 -->
<son :value="count" @input="val => count = val" />
<!-- v-model 的使用 -->
<son v-model="count2" />
</div>
</template>
<script>
import son from './son.vue'
export default {
components: {
son
},
data() {
return {
count: 0,
count2: 0
}
}
}
</script>
复制代码
子组件
<template>
<div>
count 值为: {{ value }}
<el-button size="mini" @click="hClick">点我给 count + 1</el-button>
</div>
</template>
<script>
export default {
props: {
value: {
type: Number,
required: true
}
},
methods: {
hClick() {
// 原理 : 子组件调用父组件函数 ,并传值
this.$emit('input', this.value + 1)
// v-model 双向绑定 , 直接修改
this.count2++
}
}
}
</script>
复制代码
.sync
v-model 只能在组件 或 标签上设置 一次 , 如果需要有多个变量双向绑定 , 就无法很好的实现 .
v-model 只能在 表单上双向绑定 , 在父组件和子组件之间对某个属性值进行双向绑定时, 就要用 .sync修饰符实现.
父组件
<template>
<div>
<!-- .sync原理 实现双向绑定 -->
<sonSync :count="count" @update:count="val => count = val" />
<!-- .sync 实现双向绑定 -->
<sonSync :count.sync="count2" />
</div>
</template>
<script>
import sonSync from './sonSync.vue'
export default {
components: {
sonSync
},
data() {
return {
count: 0,
count2: 0
}
}
}
</script>
复制代码
子组件
<template>
<div>
count 值为: {{ count }}
<el-button size="mini" @click="hClick">点我给 count + 1</el-button>
</div>
</template>
<script>
export default {
props: {
count: {
type: Number,
required: true
}
},
methods: {
hClick() {
// .sync原理 实现双向绑定
this.$emit('update:count', this.count + 1)
// .sync 实现双向绑定
this.count2++
}
}
}
</script>
复制代码
v-model 和 .sync 的 区别
-
v-model 在标签上只能绑定 1 个 , 表单上只能使用 v-model.
-
v-model 用的事件名 input, 属性名是 value , .sync 用的事件名 update:属性名, 属性名自定义.