溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
大家可能乍一看這個標題，可能會有疑問：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】：
提供了有效的解決了關于輸入類組件取值方案，并且已經部署實施。
總結
以上就是關于vue2.0 組件和v-model的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
