深入了解v-model的原理:v-model拆分为value属性和input事件,表单类组件的封装并用v-model简化代码

1.v-model的原理

v-model本质上是一个语法糖,

• 在input文本框中,它是由value属性和oninput事件构成的
• 在多选框中,它是由checked属性和onchange事件构成的
• 在select下拉菜单中,它是由value属性和onchange事件构成的

1.1.验证:在input文本输入框中不使用v-model实现双向数据绑定

<!-- 1.验证v-model在input文本框中的拆分 -->
<input type="text" v-model="msg">
<p>输出msg的当前值:{{msg}}</p>
<!-- 此时v-model是一个语法糖,由value属性和oninput事件组成
其中,value是让数据向视图单向绑定,oninput是view向model单向绑定,
若要验证可以删掉其中一个看效果 -->
<input type="text" :value="msg" @input="msg=$event.target.value">     

其中,
1.数据变化,令视图跟着变化==>:value
2.视图变化,令数据跟着变化==>@input
$event.target.value表示输入框用户输入的值,
msg表示model层的数据

1.2.验证:v-model在下拉菜单中的拆分

<!-- 2.验证v-model在select下拉菜单中的拆分 -->
<!-- 使用v-model双向绑定: -->
<select name="" id="" v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">广州</option><option value="104">深圳</option>
</select>
<!-- 在下拉菜单中,v-model这个语法糖是由value属性和onchange事件构成的,验证如下:  -->
<select name="" id="" :value="cityId" @change="cityId=$event.target.value"><option value="101">北京</option><option value="102">上海</option><option value="103">广州</option><option value="104">深圳</option>
</select>

2.表单类组件的封装

2.1.原理或步骤

• 父传子:数据从父组件传过来,因为父组件要进行表单提交
  绑定数据:绑定的是v-model的拆解,因为不能让子组件直接修改父组件数据
• 子传父:onchange事件监听用户对数据的修改,监听的结果传值给父组件,让父组件修改数据

父组件:(使用)
//<BaseSelect :cityId="selectId" @事件名="selectId=最新值"></BaseSelect>
<BaseSelect :cityId="selectId" @changeId="selectId=$event"></BaseSelect>
//父组件提供数据
data(){return{selectId:102}}
子组件:(封装)
注意这里不能用v-model,要把它拆解成value属性和onchange事件
<select :value="cityId" @change="handleChange"><option value="101">北京</option>...
</select>
props:{cityId:String
},
methods:{handleChange(e){//console.log(e.target.value);//是否拿到104//this.$emit("事件名".e.target.value);this.$emit("changeId".e.target.value);}}
}

2.2.示例:表单类组件封装之下拉菜单select的封装

父组件:App.vue

//html<!-- $event是获得当前事件的形参 --><base-v-model :cityId="selectId" @changeId="selectId=$event"></base-v-model>//js
import BaseVModel from "./components/BaseVModel.vue"
export default {components: {BaseVModel,},data(){selectId:'102',//此处改成数数字然后子组件的props限制改成Number也可以}
}

子组件:BaseVModel.vue

//html
<select name="" id="" :value="cityId" @change="handleChange"><option value="101">北京</option><option value="102">上海</option><option value="103">广州</option><option value="104">深圳</option>
</select>
//js
props:{cityId:String//父传子:接收父组件传过来的数据
},
methods: {handleChange(e){console.log(e.target.value);//获取用户改变城市后对应的id:102,103...this.$emit("changeId",e.target.value);//子传父:把监听到的用户输入传给父组件},
}

3.使用v-model简化代码

使用v-model进行对上例代码简化,思路是把绑定的事件和属性凑成value+input的形式

• 子组件:把:value=cityId替换为:value=value
• 子组件:把this.$emit("changeId",e.target.value)替换成this.$emit("input",e.target.value)
• 父组件:把:cityId:selectId替换成:value:selectId
• 父组件:把@changeId="selectId=$event"替换成@input="selectId=$event"
• 当父组件凑够:value和@input后,可以使用v-model替换它们,即v-model="selectId"

完整代码

父组件:App.vue

//html
<!-- <base-v-model :value="selectId" @input="selectId=$event"></base-v-model> -->
<!-- 凑齐了:value和@input之后,就可以把它们改成v-model,从而达到了简化代码的目的 -->
<base-v-model v-model="selectId"></base-v-model>
//js
data:selectId:'102'

子组件:BaseVModel.vue

//html
<select name="" id="" :value="value" @change="handleChange"><option value="101">北京</option><option value="102">上海</option><option value="103">广州</option><option value="104">深圳</option>
</select>
//js
props:{// cityId:Stringvalue:String//改成用value接收,input的拓展示例也用这个value属性
},methods: {handleChange(e){console.log(e.target.value);// this.$emit("changeId",e.target.value);this.$emit("input",e.target.value);},

4.拓展示例:完成input文本输入框的组件化封装

父组件:App.vue

//html
<!-- 拓展示例 -->
<base-v-model v-model="inputMsg"></base-v-model>
<p>input输入了什么:{{inputMsg}}</p>
//js
data(){inputMsg:"你好世界"
}

子组件:BaseVModel.vue

//html
<!-- 5.拓展和应用:把一个input文本框改成组件 -->
<input type="text" :value="value" @input="inputFunc">
//js
props:{// cityId:Stringvalue:String//改成用value接收,input的拓展示例也用这个value属性
},
methods: {inputFunc(e){this.$emit("input",e.target.value);}
},