vue2.0 組件和v-model

本文適合初學組件編寫的同學閱讀。

乍一看這個標題，可能會有疑問：v-model和組件也能扯到一起？

我打算寫這篇文章的時候，也是這么想的。咱們按簡歷的那一套STAR法則來梳理一下這篇文章：

情景【Situation】：

編寫通用的輸入組件時，子組件要綁定到父組件的某個變量上dataA，當父組件要拿到自組件的值時不能通過this.$children.xxx取值然后付給dataA，

而是父組件可以直接this.dataA就可以取到當前子組件最新值。

任務【Task】：

實現在父組件直接this.dataA就可以取到當前子組件最新值。

行動【Action】：

首先要了解v-model這個指令，許多認真閱讀過完整vue文檔的同學可能已經知道了關於v-model。

v-model官方給出的說發是：這其實是一個簡寫的形式，v-model實際執行的是下面的綁定：

<input type="text" v-bind:value="dataA" v-on:input="dataA = $event.target.value" />

v-model是動態綁定值到value，然后監聽input的inpit事件獲取值后賦給dataA的一個過程。

在說一下input的value屬性，在組件內部要定義一個value的props屬性，以便能夠動態綁定上父組件傳過來的值；

組件內部還要做一件事情：

動態計算（獲取和設置）currentValue的值，用到了vue的對象的get和set函數；

 

講到這里，我們就可以解決上面的問題了；

首先定義一個通用輸入組件：

 

Vue.component('my-component',{
    template:'<div><input type="text" type="text" v-model="currentValue"/></div>',
    data:function(){
        return {
            // 雙向綁定值-必須
            currentValue:this.value
        }
    },
    props:['value'],// 設置value為props屬性-必須
    computed:{
        currentValue: {
            // 動態計算currentValue的值
            get:function() {
                return this.value;
            },
            set:function(val) {
                this.$emit('input', val);
            }
        }
    }
})

 

在Html里綁定到vue實例的一個字段上；

<div id="demo_01">
    <my-component v-for="(val,key) in postData" v-model="postData[key]"></my-component>
    <button @click="showValue">打印對象值</button>
</div>

實例里寫一個方法

打印一下我們綁定的值；

var demo_01 = new Vue({
    el:'#demo_01',
    data:{
        postData:{
            name:'李雷',
            age:'80',
            describ:'這是一個傳奇的人物'
        }
    },
    methods:{
        showValue:function(){
            console.log(this.postData)
        }
    }
});

是不是以后就不用繁瑣冗長的this.$children.xxx取值方式了？

結果【Result】：

提供了有效的解決了關於輸入類組件取值方案，並且已經部署實施。

 

最后感謝大家閱讀，歡迎大家提出問題探討。