一、简介

v-model实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定.

二、表单实现双向绑定

1. 原理

分两步骤

1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件

可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体

v-model = v-bind:value + v-on:input

2. 实现

用v-bind:value + v-on:input来模拟实现v-model

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

例子解释：

1. 通过 v-bind:value 绑定 username 变量，每次输入内容的时候触发input事件
2. 通过事件对象参数 event.target.value 获得输入的内容，并且把这个内容赋值给username
3. 此时更改username时input输入框会变化，更改input输入框时username变量会变，从而实现了v-model的双向绑定功能

三、组件上的双向绑定

1. 原理

v-model绑定在组件上的时候做了以下步骤

1. 在父组件内给子组件标签添加 v-model ，其实就是给子组件绑定了 value 属性
2. 子组件内使用 prop 创建 创建 value 属性可以拿到父组件传递下来的值，名字必须是 value。
3. 子组件内部更改 value 的时候，必须通过 $emit 派发一个 input 事件，并携最新的值
4. v-model 会自动监听 input 事件，把接收到的最新的值同步赋值到 v-model 绑定的变量上

2. 实现

父组件操作

<子组件标签 v-model="父组件定义的变量值 />

子组件操作

<template>
	<p>子组件库存:{{ value }}</p>
	<button @click="addFun">增加1</button>
</template>
<script>
	export default {
		props:{
			value:{
				type: Number,
				default:0
			}
		},
		methods:{
			addFun() {
				this.$emit('input', this.value + 1)
			}
		}
	}
</script>
// 这样后每次点击按钮的时候，库存就会加1，并且把变更后的值传递给父组件
// 父组件 v-model 绑定的变量就会改变

3. 实例

父组件

//v-model绑定值
<el-form-item label="员工头像">
        <!-- 放置上传图片 -->
        <UploadImg v-model="userInfo.staffPhoto" />
</el-form-item>
//uploadimg: 自定义的组件， v-model：双向绑定

子组件（图片上传组件）

//1.定义props value来接收父组件传入的图片地址
 props: {
    // 父组件传递过来的v-model对应的值
    value: { type: String, default: '' }
  },
//2.直接用value来显示图片
<img :src="value" />
//3.在子组件图片上传成功之后，this.$emit(‘input’, 新地址)， 抛给父组件，达到更新父组件中v-model绑定数据项
   const imageUrl = `https://${data.Location}`
   this.$emit('input', imageUrl)