自定义v-model和.sync同步父子组件prop

了解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就可以把这些逻辑全部放在子组件进行，进而降低封装组件调用难度。