v-model原理&v-model应用于表单类组件封装

1.1 v-model原理

1.原理：

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

<template>
  <div id="app" >
    <input v-model="msg" type="text">

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

2.作用：

提供数据的双向绑定

• 数据变，视图跟着变 :value
• 视图变，数据跟着变 @input

3.注意

$event 用于在模板中，获取事件的形参

4.代码解析

<h3>需求：不用v-model实现双向绑定</h3>
<input type="text"  :value="uname" @input="changeValue"/>
data () {
  return {
    uname:"zhangsan"
  }
},
methods: {
  changeValue(e) {
    // 把输入框的值，赋值给uname
    this.uname = e.target.value
  }
}

5.结论

v-model可以拆分成 :value 和 @input

6.v-model使用在其他表单元素上的原理

不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model

底层处理的是 checked属性和change事件。

1.2 v-model应用于输入框组件封装

1.原理：

表单类组件封装，实现子组件和父组件数据的双向绑定。

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

<h3>需求：实现输入框组件的v-model</h3>
<MyInput :value="age"  @input="changeAge"></MyInput>
changeAge(val) {
  this.age = val
},

<input type="text" :value="value" @input="$emit('input', $event.target.value)"/>
export default {
  name: 'MyInput',
  props:['value']
}

1.3 v-model 简化代码

1.目标：

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

2.如何简化：

v-model其实就是 :value和@input事件的简写

• 子组件：props通过value接收数据，事件触发 input
• 父组件：v-model直接绑定数据

3.代码示例

<h3>需求：实现输入框组件的v-model</h3>
<MyInput v-model="age"></MyInput>
changeAge(val) {
  this.age = val
},

<input type="text" :value="value" @input="$emit('input', $event.target.value)"/>
export default {
  name: 'MyInput',
  props:['value']
}

3.结论

• 组件的v-model需要子组件的配合。
• 子组件需要接收value属性，并触发input事件

1.4 v-model应用于下拉框组件封装

1. 代码示例

<!-- 下拉框的v-model相当于:value + @input -->
<h3>需求：实现下拉框组件的v-model</h3>
<!-- <MySelect :value="address" @input="changeSelect" ></MySelect> -->
<MySelect v-model="address" ></MySelect>
methods: {
  changeSelect(val){
    this.address = val
  },
}

<template>
  <select :value="value" @change="$emit('input', $event.target.value)">
    <option value="北京">北京市</option>
    <option value="上海">上海市</option>
    <option value="广州">广州市</option>
    <option value="深圳">深圳市</option>
  </select>
</template>
<script>
export default {
  name: 'MySelect',
  props:['value']
}
</script>

2. 结论

• v-model === :value + @input
• 父传子，为了把数据传给子组件，设置表单元素的默认值
• 子传父，为了把表单元素的值，传给父组件，修改data数据-