说说v-model

1.v-model是什么？

简单说，v-model其实就是一个语法糖而已。
简单举例，一个input元素进行了v-model的绑定，那么这个时候其实也就是进行了value属性的绑定以及input事件的绑定。

<input v-model="data"/>
//实际上等于
<input :value="data" @input="val => data = val"/>

当然，对于不同的元素来说，v-model语法糖简化的属性也不相同，例如在单选框上绑定的就是change事件，这里就不一一举例了。

2.v-model仅仅是语法糖吗？

其实，v-model也有创建响应式数据的功能。例如我们经常有一个很多字段的表单元素，一般情况下我们只会创建一个对象，并不会把里面的属性一一创建，但是使用v-model绑定一个对象的不存在的属性，它就会为我们自动创建该属性，并且该属性是响应式的。

<template>
	//会在form自动创建name属性，并监听变化。
	<input v-model="form.name" />
</template>
<script>
	data() {
     
		return {
     
			form: {
     }
		}
	}
</script>

3.在组件上使用v-model

v-model除了在表单上进行使用外，还经常使用在组件上。对组件使用后，相当于给组件传递了一个默认的props属性，里面有一个默认属性value。还有一个默认的input触发函数。当然value属性和input事件名都可以通过model属性进行修改

//父组件
<son v-model="parentData"></son>

//子组件
<script>
export default {
     
  name: 'son',
  components: {
     },
  // 父组件使用v-model相当于给子组件传了一个value值，注意如果要使用该值必须先使用prop接收
  // props: {
     
  //   value: {
     
  //     type: Number,
  //     default: 99
  //   },
  // },
  props: ['parentData'],
  //可以使用model元素给value与innput取别名
  model: {
     
    prop: 'parentData',
    event: 'changeParentData'
  },
  data () {
     
    return {
     
    };
  },
  methods: {
     
  	//触发事件
    change() {
     
      this.$emit('changeParentData', 2)
    }
  }
}
</script>

 

  
 

4.v-model的特性

v-model是单项数据流的双向数据绑定。

什么叫单项数据流？就是父组件传递给子组件，但是子组件并不能直接修改父组件的值，而是通过事件告知父组件子组件需要修改值，让父组件进行更新。

什么叫双向数据绑定？就是视图层与数据源相互作用，例如我们直接修改data里面的属性值，视图也会跟着变化，但是我们直接在输入框进行输入，data里的属性值也会随之变化。