Vue的指令v-model的原理
v-model的原理
原理：v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写。
作用：提供数据的双向绑定
- 数据变，视图跟着变
:value - 视图变，数据跟这变
@input
注意：$event用于在模板中获取事件的形参。
<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拆解绑定数据
- 子传父：监听输入，子传父传值给父组件修改
父组件（使用）：
<BaseSelect :cityId="selectId" @事件名="selectId = $event"></BaseSelect>子组件（封装）：
<select :value="cityId" @chang="handleChange">...</select>props: {cityId: String },methods: {handleChange (e) {this.$emit('事件名', e.target.value)} } -
父组件v-model简化代码，实现子组件和父组件数据双向绑定。
- 子组件中：props通过value接收，事件触发input
- 父组件中：v-model给组件直接解绑数据（
:value+@input）
父组件（使用）：
<BaseSelect v-model="selectId"></BaseSelect>子组件（封装）：
<select :value="cityId" @chang="handleChange">...</select>props: {value: String }, methods: {handleChange (e) {this.$emit('input', e.target.value)} }