vue自定义v-model的解析

大家用过vue 的都知道，vue可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。那我们今天就好好分析一下如何在自定义组件上自定义v-model。

基本概念详解

传送门

v-model 其实就是一个语法糖，它其实绑定了value属性和一个input事件（根据具体的表单控件，这里绑定的事件和属性名也有所不同，这里以input举例）如上图所示。我们在组件声明的时候，通过prop 接收一个value的属性，绑定到input的value上，改变时，触发input原生事件，从而像父组件发射了一个自定义input,并传入改变之后的值，父组件直接获取输入的新值，并绑定到value上。此value又从父组件传给子组件。

刚才我们也有说明，v-model 是根据具体的表单控件，来决定绑定的事件名和属性名是什么，我们看下vue官网文档的解释：
传送门在此

vue 给我们提供了一个model 的属性，来帮助我们根据具体的表单类型来改变绑定的属性和事件。

实际运用中v-model 的例子

在写中台业务时，有很多弹框组件，这里就以element-ui弹框组件为例，详细解析下v-model的用法：

组件名为： dialog
<template lang="pug">
    el-dialog.dialog--style(
        title="添加用户"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        center
        width="30%")
        span.dialog-footer(slot="footer")
            el-button(@click="dialogVisible=false") 取消
            el-button(type="primary" @click="sureHandle") 确认
</template>
<script>
export default {
    props: {
        // 从父组件传入的value属性
        value: {
            type: Boolean,
            default: false
        }
    },
    computed: {  
        // 计算属性，根据value的值来控制弹框是否显示
        dialogVisible: {
            get() {
                return this.value
            },
        // 通过自定义input事件，将最新值传给父组件，告知选框的显隐状态
            set(val) {
                this.$emit('input', val)
            }
        }
    }
}
</script>

// 语法糖形式
<dialog v-model="isShowDialog"></dialog>

<dialog :value="isShowDialog" @input="isShowDialog=$event"></dialog>