Vue组件自定义v-model对prop的值进行双向绑定

用过iview组件的的同学都知道，iview的组件一般有:value的情况下，还会提供v-model进行双向绑定，例如iview的对话框组件（地址），内部原理是怎么实现的呢？今天我们就来一探究竟。

在官方给出的v-model指令中，实际上是:value和@input组合的一个语法糖

<input v-model="inputVal">
// 相当于
<input :value="inputVal" @input="inputVal = $event.target.value">

接下来我们实现一个简单的例子

// 父组件
<template>
    <Modal v-model="show" />
</template>

// 子组件
<template>
    <div class="modal-container" v-show="visible">
        <Button @click="onClose" />
    </div>
</template>
export default {
    props: [show],
    data: {
        visible: this.show
    },
    watch: {
        show(val) {
           this.visible = val 
        }
    },
    methods: {
        onClose() 
            this.visible = false
            this.$emit('input' false)
        }
    }
}

通过父组件绑定prop的值show用于显示Modal对话框组件的初始化显示,因为prop的值不能修改，因此子组件控制显示的值是定义在data对象的visible，在关闭子组件同事通过emit广播一个false值回父组件，从而实现双向绑定，有兴趣的话可以看看ivew的Modal组件源码

vue官方还提供了一种另外一种v-model自定义双向绑定的实现，有兴趣的也可以去看看，地址