原理：v-model 本质上是一个语法糖。例如应用在输入框上，就是 value 属性 和 input 事件 的合写（如果应用于复选框，就是 checked 属性和 change 事件的合写，下拉菜单是 value 属性和 change 事件的合写）
作用：提供数据的双向绑定
①数据变，视图跟着变 :value
②视图变，数据跟着变 @input
<input v-model = "msg" type = "text"> 等价于→ <input :value = "msg" @input = "msg = $event.target.value" type = "text">
$event 用于在模板中，获取事件的形参。 $event.target.value 就是输入框内输入的内容
------------------------------------------------------------------------------------------------------------------------------------------
表单类组件的封装（本质是实现了 子组件 和 父组件数据 的双向绑定）：
① 父传子：数据 应该是父组件 props 传递过来的，v-model 拆解 绑定数据（v-model 不能直接与父组件的数据绑定，因为 v-model 是双向绑定，意味着是会改值的，而子组件不能直接修改父组件的数据，所以要将 v-model 进行拆解）
② 子传父：监听输入，子传父传值给父组件修改
eg：App.vue中导入下拉菜单组件
第一步——父传子：
1. 父组件App.vue：
data 函数中定义变量：selectId : "103"
// 把城市 id 传给子组件
<BaseSelect :cityId = "selectId"> </BaseSelect>
2. 子组件 BaseSelect.vue中进行接收：
<template>
<div>
<select :value = "cityId">
<option value = "101"> 北京 </option>
<option value = "102"> 上海 </option>
<option value = "103"> 河北 </option>
</select>
</div>
</template>
<script>
export default {
props : {
cityId : String
}
}
</script>
第二步——子传父：
1. 监听子组件中 下拉菜单的修改：
<template>
<div>
<select :value = "cityId" @change = "handleChange">
<option value = "101"> 北京 </option>
<option value = "102"> 上海 </option>
<option value = "103"> 河北 </option>
</select>
</div>
</template>
<script>
export default {
props : {
cityId : String
},
methods : {
handleChange ( e ) {
// e.target：触发事件的事件源——下拉菜单 e.target.value：值
this.$emit (' changeId ' , e.target.value)
}
}
}
</script>
2. 父组件监听修改：
<BaseSelect :cityId = "selectId" @changeId = "selectId = $event"> </BaseSelect> // $event：selectId 事件的形参，也就是子组件的 e.target.value
------------------------------------------------------------------------------------------------------------------------------------------
父组件当中使用 v-model 应用于组件 来简化 组件封装的代码：
1. 子组件中：接收数据的时候，通过 value 属性来进行接收，触发事件时 事件名固定必须是 input
2. 父组件中：直接用 v-model 给组件绑数据
eg：
子组件改写：
1. <select :value = "value" @change = "handleChange">
2. props : {
value : String
},
methods : {
handleChange ( e ) {
this.$emit (' input ' , e.target.value)
}
}
父组件改写：
<BaseSelect :value = "selectId" @input = "selectId = $event"> </BaseSelect>
因为 v-model 本质是 :value 与 @input 的组合，所以直接改写 → <BaseSelect v-model = "selectId"> </BaseSelect>
标签：target,通信,value,组件,input,model,下拉菜单 From： https://www.cnblogs.com/gagaya2/p/17753060.html