您好,登錄后才能下訂單哦!
前言
大家可能乍一看這個(gè)標(biāo)題,可能會(huì)有疑問(wèn):v-model和組件也能扯到一起?在打算寫這篇文章的時(shí)候,也是這么想的。咱們按簡(jiǎn)歷的那一套STAR法則來(lái)梳理一下這篇文章:
情景【Situation】:
編寫通用的輸入組件時(shí),子組件要綁定到父組件的某個(gè)變量上dataA,當(dāng)父組件要拿到自組件的值時(shí)不能通過(guò)this.$children.xxx
取值然后付給dataA,
而是父組件可以直接this.dataA
就可以取到當(dāng)前子組件最新值。
任務(wù)【Task】:
實(shí)現(xiàn)在父組件直接this.dataA就可以取到當(dāng)前子組件最新值。
行動(dòng)【Action】:
首先要了解v-model這個(gè)指令,許多認(rèn)真閱讀過(guò)完整vue文檔的同學(xué)可能已經(jīng)知道了關(guān)于v-model。
v-model官方給出的說(shuō)發(fā)是:這其實(shí)是一個(gè)簡(jiǎn)寫的形式,v-model實(shí)際執(zhí)行的是下面的綁定:
<input type="text" v-bind:value="dataA" v-on:input="dataA = $event.target.value" />
v-model是動(dòng)態(tài)綁定值到value,然后監(jiān)聽(tīng)input的inpit事件獲取值后賦給dataA的一個(gè)過(guò)程。
在說(shuō)一下input的value屬性,在組件內(nèi)部要定義一個(gè)value的props屬性,以便能夠動(dòng)態(tài)綁定上父組件傳過(guò)來(lái)的值;
組件內(nèi)部還要做一件事情:
動(dòng)態(tài)計(jì)算(獲取和設(shè)置)currentValue的值,用到了vue的對(duì)象的get和set函數(shù);
講到這里,我們就可以解決上面的問(wèn)題了;
首先定義一個(gè)通用輸入組件:
Vue.component('my-component',{ template:'<div><input type="text" type="text" v-model="currentValue"/></div>', data:function(){ return { // 雙向綁定值-必須 currentValue:this.value } }, props:['value'],// 設(shè)置value為props屬性-必須 computed:{ currentValue: { // 動(dòng)態(tài)計(jì)算currentValue的值 get:function() { return this.value; }, set:function(val) { this.$emit('input', val); } } } })
在Html里綁定到vue實(shí)例的一個(gè)字段上;
<div id="demo_01"> <my-component v-for="(val,key) in postData" v-model="postData[key]"></my-component> <button @click="showValue">打印對(duì)象值</button> </div>
實(shí)例里寫一個(gè)方法
打印一下我們綁定的值;
var demo_01 = new Vue({ el:'#demo_01', data:{ postData:{ name:'李雷', age:'80', describ:'這是一個(gè)傳奇的人物' } }, methods:{ showValue:function(){ console.log(this.postData) } } });
是不是以后就不用繁瑣冗長(zhǎng)的this.$children.xxx
取值方式了?
結(jié)果【Result】:
提供了有效的解決了關(guān)于輸入類組件取值方案,并且已經(jīng)部署實(shí)施。
總結(jié)
以上就是關(guān)于vue2.0 組件和v-model的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)億速云的幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。