了解v-model
我们通常使用v-model在表单控件上，用来获取控件values，v-model指令其实就是控件input事件+获取或改变value的语法糖，
那么我们在表单控件其他地方使用v-model怎么办呢，
例如：我们需要封装一个弹窗等，需要用v-model控制弹窗的打开与关闭，
注意：前提是使用v-model指令
思路
在子组件改变传递prop值并同步到父组件中，以此完成父组件控制弹窗开关。
那么我们首先来介绍一下怎么自定义（重写）v-model指令
- 子组件有一个model属性完成修改传值
<template>
<p class="child">
<p>我是儿子，父亲对我说： {{give}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
props: {
give: String
},
//将调用组件的v-model绑定的值转化为give，通过$emit进行改变
//这种写法更加规范话，不用到处着input事件之类的
model: {
//注意：这里是prop
prop: 'give',//完全组件内部使用，
event: 'returnBack'//组件内部$emit定义的函数
},
methods: {
returnBackFn() {
this.$emit('returnBack', '我是你祖宗');
}
}
}
</script>
使用.sync修饰符
- 可以在父组件v-bind绑定的传值上使用.sync，并在子组件$emeit中使用update
这个我在实际项目中根据参考链接进行过测试，但是手写代码找不到了，就复制粘贴一下吧。反正前端大部分都是粘粘粘的。
父组件
<child :isShow.sync="isShow" v-show="isShow"/>
//isShow是需要给子组件的值
子组件
<template>
<div>
我是一个子组件，我在红色的海洋里！
<input type="button" value="点我隐身" @click="upIsShow">
</div>
</template>
<script>
export default {
methods:{
upIsShow(){
this.$emit("update:isShow",false);
}
}
}
</script>
大家都知道$emit第一次从那时是自定义事件，需要在父组件@fn调用，那么子组件中定义的update:isShow在父组件表现形式就是@update:isShow,:isShow.sync=”isShow”其实是 @update:isShow=”bol=>isShow=bol”语法糖。
这样应该对.sync修饰符有一定了解了吧。
比较
利用model属性和.sync修饰符都可以达到子组件同步修改父组件的value
通过代码相比较而言，v-model写法更简单，如果是站在封装组件的角度来看，肯定是组件调用方法越简单越好，不需要特殊的规则最好。而.sync需要同时绑定prop和v-show。自定义v-model就可以把这些逻辑全部放在子组件进行，进而降低封装组件调用难度。
