深入了解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实现双向数据绑定

<input type="text" v-model="msg">
<p>输出msg的当前值:{{msg}}p>

<input type="text" :value="msg" @input="msg=$event.target.value">     

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

1.2.验证: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>

<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" @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:String
 value: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:String
  value:String//改成用value接收,input的拓展示例也用这个value属性
},
methods: {
  inputFunc(e){
    this.$emit("input",e.target.value);
  }
},