v-model本质上是一个语法糖。例如应用在输入框上,就是value属性 和 input事件 的合写
提供数据的双向绑定
-
数据变,视图跟着变 :value
-
视图变,数据跟着变 @input
v-model="msg"===== :value="msg" @input="msg = $event.target.value"
$event 用于在模板中,获取事件的形参
注意:不同的表单元素, v-model在底层的处理机制是不一样的。比如给checkbox使用v-model。底层处理的是 checked属性和change事件。
表单类组件封装
实现子组件和父组件数据的双向绑定 (实现App.vue中的selectId和子组件选中的数据进行双向绑定)
父传子:数据应从父组件props传来,数据是父亲的,不能直接绑定,v-model拆解来绑定数据
子传父
App.vue
<template>
<div class="app">
<BaseSelect
:selectId="selectId"
@changeCity="selectId = $event"
></BaseSelect>
</div>
</template>
<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
data() {
return {
selectId: '102',
}
},
components: {
BaseSelect,
},
}
</script>
BaseSelect.vue
<template>
<div>
<select :value="selectId" @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: {
selectId: String,
},
methods: {
selectCity(e) {
this.$emit('changeCity', e.target.value)
},
},
}
</script>
v-model简化代码
目标:
父组件通过v-model 简化代码,实现子组件和父组件数据 双向绑定
简化:
v-model其实就是 :value和@input事件的简写
-
子组件:props通过value接收数据,事件触发 input
-
父组件:v-model直接绑定数据