Vue的指令v-model的原理

v-model的原理

原理：v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写。

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

1. 数据变，视图跟着变 :value
2. 视图变，数据跟这变 @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简化代码

1. 表单类组件封装

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

   父组件（使用）：

   <BaseSelect :cityId="selectId" @事件名="selectId = $event"></BaseSelect>
   

   子组件（封装）：

   <select :value="cityId" @chang="handleChange">...</select>
   

   props: {cityId: String
   },
   

   methods: {handleChange (e) {this.$emit('事件名', e.target.value)}
   }
   

2. 父组件v-model简化代码，实现子组件和父组件数据双向绑定。

   1. 子组件中：props通过value接收，事件触发input
   2. 父组件中：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)}
   }