vue之自定义组件的 v-model 的详解及实践

Vue的自定义组件的 v-model的这块将的不是很清楚，今天我们就一起来捋一下看看自定义组件中的v-model是什么。

先看官方文档中对v-model的解释

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

那么v-model的语法糖是什么呢？

第一行的代码其实只是第二行的语法糖。<input v-model="todosth" />
<input :value="todosth" @input="todosth = $event.target.value" />

input 框拥有一个 oninput 事件，一旦输入框内容发生变化，就会触发 oninput ，把最新的value传递给 todosth。面试中经常会有人问这个问题。

$event.target.value 就是当前元素的值。

了解了V-model 我们再看下他在自定义组件上的使用，先看下官网的说完为看下它解决了哪些问题：

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突

给组件添加 v-model 属性时，默认会把 value 作为组件的属性，然后把 'input' 值作为给组件绑定事件时的事件名，那么如果我们需要是checked 属性的时候，当点击这个单选框的时候只会触发 onchange 事件不会触发 oninput 事件。

那么自定义组件的 v-model可以通过自定义 prop/event来完成我们需要的结果，直接上代码：

父组件

<!-- parent -->
<template>
<div class="parent">
  <p>父组件将传递给子组件的数据是： <input type="text" v-model="giveChildData"/></p>
  <Child v-model="giveChildData"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
		todosth:0,
      giveChildData: '儿子，爸要把家产传给你啊！'
    };
  },
  components: {
    Child
  }
}
</script>

子组件：

<!-- child -->
<template>
	<div class="child">
		<p>子组件将通过$emit调用父组件的函数并修改数据：{{ give }}</p>
		<span @mousemove="returnBackFn">答复</span>
	</div>
</template>
<script>
export default {
	props: {
		give: {
			type: String,
			default: '0'
		}
	},
	model: {
		prop: 'give',
		event: 'returnBack'
	},
	methods: {
		returnBackFn() {
			this.$emit('returnBack', '啥家产？有矿啊！');
		}
	}
};
</script>

这里的 giveChildData 的值将会传入这个名为 give 的 prop。同时当 <Child> 触发一个 returnBack 事件并附带一个新的值的时候，这个 giveChildData 的属性将会被更新。