v-model的原理
原理:v-model本质上是一个语法糖。例如应用在输入框上,就是value属性和input事件的合写。
作用:提供数据的双向绑定
- 数据变,视图跟着变
:value
- 视图变,数据跟这变
@input
注意:$event
用于在模板中获取事件的形参。
vue
<template>
<div id="app">
<input v-model="msg" type="text">
<input :value="msg" @input="msg = $event.target.value" type="text" name="" id="">
</div>
</template>
表单类组件封装 & v-model简化代码
-
表单类组件封装
- 父传子:数据应该是父组件props传递过来的,v-model拆解绑定数据
- 子传父:监听输入,子传父传值给父组件修改
父组件(使用):
vue<BaseSelect :cityId="selectId" @事件名="selectId = $event"></BaseSelect>
子组件(封装):
vue<select :value="cityId" @chang="handleChange">...</select>
vueprops: { cityId: String },
vuemethods: { handleChange (e) { this.$emit('事件名', e.target.value) } }
-
父组件v-model简化代码,实现子组件和父组件数据双向绑定。
- 子组件中:props通过value接收,事件触发input
- 父组件中:v-model给组件直接解绑数据(
:value
+@input
)
父组件(使用):
vue<BaseSelect v-model="selectId"></BaseSelect>
子组件(封装):
vue<select :value="cityId" @chang="handleChange">...</select>
jsprops: { value: String }, methods: { handleChange (e) { this.$emit('input', e.target.value) } }