大家用過vue 的都知道，vue可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。那我們今天就好好分析一下如何在自定義組件上自定義v-model。

基本概念詳解

傳送門

v-model 其實就是一個語法糖，它其實綁定了value屬性和一個input事件（根據(jù)具體的表單控件，這里綁定的事件和屬性名也有所不同，這里以input舉例）如上圖所示。我們在組件聲明的時候，通過prop 接收一個value的屬性，綁定到input的value上，改變時，觸發(fā)input原生事件，從而像父組件發(fā)射了一個自定義input,并傳入改變之后的值，父組件直接獲取輸入的新值，并綁定到value上。此value又從父組件傳給子組件。

剛才我們也有說明，v-model 是根據(jù)具體的表單控件，來決定綁定的事件名和屬性名是什么，我們看下vue官網(wǎng)文檔的解釋：
傳送門在此

vue 給我們提供了一個model 的屬性，來幫助我們根據(jù)具體的表單類型來改變綁定的屬性和事件。

實際運用中v-model 的例子

在寫中臺業(yè)務(wù)時，有很多彈框組件，這里就以element-ui彈框組件為例，詳細(xì)解析下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") 確認(rèn)
</template>
<script>
export default {
    props: {
        // 從父組件傳入的value屬性
        value: {
            type: Boolean,
            default: false
        }
    },
    computed: {  
        // 計算屬性，根據(jù)value的值來控制彈框是否顯示
        dialogVisible: {
            get() {
                return this.value
            },
        // 通過自定義input事件，將最新值傳給父組件，告知選框的顯隱狀態(tài)
            set(val) {
                this.$emit('input', val)
            }
        }
    }
}
</script>

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

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