语法糖v-model与.sync修饰符原理

v-model语法糖扩展

1.用于input输入框时：

<!--v-model语法糖-->
<input type="text" v-model="value">
<!--扩展为-->
<input type="text" :value="value" @input="value = $event.target.value">

2.用于组件时：（常用于封装element.ui的弹窗组件，可实现显示与隐藏）

// 父组件
<dialog v-mode='isShow' > </dialog>
// 扩展为：
<dialog :isShow="isShow" @input="value = $event"> </dialog> // $event没写错，不要怀疑~
// 只需要在子组件触发自定义input事件并携带自定义参数即可完成父子双向绑定
this.$emit("input", $event.target.value)

element弹窗组件抽离的完整写法，使用v-model简化代码：

简化部分不必要的代码，此方法可以叫优雅的控制dialog

// 父组件
<diy-dialog v-model='isShow' />

// 子组件
<el-dialog title="修改资金记录" :visible.sync="dialogVisible" width='30%'> </el-dialog>

props： ['isShow'],
computed: {
  dialogVisible: {
    get () {
        return this.isShow
    },
    set (newValue) {
        this.$emit('input', newValue)
    }
  }
}

.sync语法糖扩展

对父子组件的值进行双向绑定，可用于频繁变动的值，例如dialog的显示隐藏

// 父组件
<diy-dialog :isShow.sync="show" />  // 注意：isShow和show最好不一样，否则无效，这是个巨坑
// 语法糖扩展为
<my-component  :isShow="show"  @update:isShow="(newValue) => isShow= newValue" >

// 子组件的写法
this.$emit('update:isShow', true || false)

参考文章：
https://www.jianshu.com/p/e908cc6719c8
https://www.jianshu.com/p/19b1bea8603c