在Vue组件中，v-model指令可以用来实现双向数据绑定。它用于将组件的属性和父组件中的数据进行双向绑定，使得当属性的值改变时，父组件中的数据也会相应地改变，并且当父组件中的数据改变时，属性的值也会相应地改变。

目录

v-model

表单类组件使用v-model简化绑定

化简前

化简后

---

v-model

原理：v-model本质上是一个语法糖（语法简写）。例如应用在输入框（不同元素的原表示不同，所以这里只举例输入框）上,就是value属性和input事件的合写。

作用：提供数据的双向绑定

1. 数据发生改变,页面会自动变:value
2. 页面输入改变,数据会自动变@input

注意：$event用于在模板中，用于获取事件的形参

App.vue

<template><div class="app"><input type="text" v-model="msg1" /><br /><input type="text" :value="msg2" @input="msg2 = $event.target.value" /></div>
</template><script>
export default {data() {return {msg1: '',msg2: '',}},
}
</script><style>
</style>

表单类组件使用v-model简化绑定

1. 父传子：数据由父组件props传递过来，v-model拆解绑定数据
2. 子传父：监听输入，子传父传值给父组件修改

 父组件使用，子组件封装

化简前

化简后

1. 子组件中，props通过value接收，事件触发input
2. 父组件中，v-model给组件直接绑数据（:value+@input）
    

 

BaseSelect.vue

<template><div><select :value="value" @change="selectCity"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {props: {value: String,},methods: {selectCity(e) {this.$emit('input', e.target.value)},},
}
</script><style>
</style>

App.vue

<template><div class="app"><BaseSelectv-model="selectId"></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},
}
</script><style>
</style>

main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')