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

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

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

"inputVal">
// 相当于
"inputVal" @input="inputVal = $event.target.value">复制代码

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

// 父组件


// 子组件

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自定义双向绑定的实现，有兴趣的也可以去看看，地址

转载于:https://juejin.im/post/5caafa8be51d452b417a493c