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函數；

 

講到這裏，咱們就能夠解決上面的問題了；

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

 

 1 Vue.component('my-component',{
 2     template:'<div><input type="text" type="text" v-model="currentValue"/></div>',
 3     data:function(){
 4         return {
 5             // 雙向綁定值-必須
 6             currentValue:this.value
 7         }
 8     },
 9     props:['value'],// 設置value爲props屬性-必須
10     computed:{
11         currentValue: {
12             // 動態計算currentValue的值
13             get:function() {
14                 return this.value;
15             },
16             set:function(val) {
17                 this.$emit('input', val);
18             }
19         }
20     }
21 })

 

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

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

實例裏寫一個方法

打印一下咱們綁定的值；

 1 var demo_01 = new Vue({
 2     el:'#demo_01',
 3     data:{
 4         postData:{
 5             name:'李雷',
 6             age:'80',
 7             describ:'這是一個傳奇的人物'
 8         }
 9     },
10     methods:{
11         showValue:function(){
12             console.log(this.postData)
13         }
14     }
15 });

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

結果【Result】：

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

 

最後感謝你們閱讀，歡迎你們提出問題探討。