v-model
v-model是什么？
v-model是Vue中用于在表单输入、选择和其他元素上创建双向数据绑定的指令。它可以根据不同的输入类型自动选取正确的方法来更新元素。
用法
1.基本使用
对于简单的输入框，v-model可以直接绑定到一个数据属性上：
<input v-model="message" />
2.自定义组件中的v-model
在自定义组件中使用v-model时，默认情况下它会将值绑定到名为value的prop，并监听input事件来更新父组件的数据。
Father.vue
<template>
<div class="father">
<SonComponent v-model="message" />
message:{{ message }}
</div>
</template>
<script>
import SonComponent from './SonComponent.vue'
export default {
components: { SonComponent },
data() {
return {
message: '',
}
},
}
</script>
<style scoped></style>
Son.vue
<template>
<div class="son">
<input type="text" :value="value" @input="$emit('input', $event.target.value)" />
</div>
</template>
<script>
export default {
props: ['value'],
data() {
return {}
},
}
</script>
<style scoped></style>
3.修改默认行为
可以自定义指定双向绑定的属性名和事件
Father.vue
<template>
<div class="father">
<SonComponent v-model="message" />
message:{{ message }}
</div>
</template>
<script>
import SonComponent from './SonComponent.vue'
export default {
components: { SonComponent },
data() {
return {
message: '',
}
},
}
</script>
<style scoped></style>
Son.vue
<template>
<div class="son">
<input type="text" :value="message" @input="$emit('updateMessage', $event.target.value)" placeholder="名字" />
</div>
</template>
<script>
export default {
model: {
prop: 'message',
event: 'updateMessage',
},
props: ['message'],
data() {
return {}
},
}
</script>
<style scoped></style>
注意：Vue2只能通过v-model双向绑定一个数据，Vue3可以通过modelValue属性和update:modelValue事件来改变默认行为
v-model的原理
v-model原理其实是背后有两个操作：
- v-bind绑定value属性的值
- v-on 绑定input事件监听到函数中，函数会获取最新的值，赋值给绑定的属性中
v-model 是单向数据流吗
是的，因为父组件可以向子组件传递数据，而子组件不能改变父组件传递给它的prop属性，官方推荐的做法是它抛出事件，通知父组件自行改变绑定的值。
v-model和.sync的区别
首先Vue3已经不推荐使用.sync修饰符了，所以主要区别体现在vue2中
1.使用场景不同：
- v-model主要用于输入类组件，如
<input/> - .sync适用于任何类型的数据同步
2.实现机制不同：
- v-model:内部基于
value自定义属性和@input事件实现，父组件通过value属性向子组件传递，子组件通过触发@input事件通知父组件更新值 - .sync:父组件为子组件的属性创建一个对应的更新事件监听器（
update:propName），当子组件发送这个事件时，父组件就会更新相应的属性值。
3.语法差异
