本篇文章給大家分享的是有關(guān)vue中怎么利用v-model指令實(shí)現(xiàn)父子組件通信,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供睢寧縣網(wǎng)站建設(shè)、睢寧縣做網(wǎng)站、睢寧縣網(wǎng)站設(shè)計(jì)、睢寧縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、睢寧縣企業(yè)網(wǎng)站模板建站服務(wù),十多年睢寧縣做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。vue的雙向數(shù)據(jù)綁定
v-model這個(gè)指令只能用在<input>, <select>,<textarea>這些表單元素上,所謂雙向綁定,指的就是我們?cè)趈s中的vue實(shí)例中的data與其渲染的dom元素上的內(nèi)容保持一致,兩者無(wú)論誰(shuí)被改變,另一方也會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。
這個(gè)問(wèn)題在很多前端面試中,會(huì)提及。面試官問(wèn)你,vue的雙向數(shù)據(jù)綁定原理是什么?當(dāng)然,這個(gè)也是耳熟能詳?shù)膯?wèn)題,百度隨便一搜索,到處都能找到答案。
一般都會(huì)搜索到,是用Object.defineProperty( ) ,來(lái)監(jiān)聽(tīng)數(shù)據(jù)get和set,來(lái)實(shí)現(xiàn)數(shù)據(jù)劫持的。
假如對(duì)Object.defineProperty( )不是很了解,可以點(diǎn)擊上面鏈接,看看其語(yǔ)法!
舉個(gè)簡(jiǎn)單的例子:
var blog = { name: 'haorooms博客' }; console.log(blog.name); // haorooms博客
如果想要在執(zhí)行console.log(blog.name)
的同時(shí),直接給haorooms博客加個(gè)書(shū)名號(hào),那要怎么處理呢?或者說(shuō)要通過(guò)什么監(jiān)聽(tīng)對(duì)象 blog的屬性值。這時(shí)候Object.defineProperty( )
就派上用場(chǎng)了,代碼如下:
var blog= {} var name = ''; Object.defineProperty(blog, 'name', { set: function (value) { name = value; console.log('歡迎來(lái)到' + value); }, get: function () { return '《' + name + '》' } }) blog.name = 'haorooms博客'; // 歡迎來(lái)到haorooms博客 console.log(blog.name); // 《haorooms博客》
上面代碼執(zhí)行一下,可以查看效果!
關(guān)于 vue的雙向數(shù)據(jù)綁定,具體如何實(shí)現(xiàn)的?網(wǎng)上也有很多實(shí)現(xiàn)的代碼,這里就不多累贅了!
v-model 的使用
上面開(kāi)了一個(gè)小差,講了那么多,其實(shí)就是為了說(shuō)明Vue 是單項(xiàng)數(shù)據(jù)流,v-model 只是語(yǔ)法糖而已。
<input v-model="haorooms" /> <input v-bind:value="haorooms" v-on:input="haorooms= $event.target.value" />
第一行的代碼其實(shí)只是第二行的語(yǔ)法糖。然后第二行代碼還能簡(jiǎn)寫(xiě)成這樣:
<input :value="haorooms" @input="haorooms= $event.target.value" />
也就是說(shuō),
<input v-model="haorooms" />
也可以寫(xiě)成
<input :value="haorooms" @input="haorooms= $event.target.value" />
v-model在組件上的使用
回到我們一開(kāi)始的疑問(wèn)了?vue中v-model如何進(jìn)行父子組件的通信?如何在組件中使用呢?假如你理解了我上面的例子,那么,我們就可以很簡(jiǎn)單的在組件中使用v-model了。
父組件代碼如下:
<template> <div id="demo"> <test-model v-model="haorooms"></test-model> <span>{{haorooms}}</span> </div> </template> <script> import testModel from 'src/components/testModel' export default { data(){ return{ haorooms: "haorooms" } }, components: { testModel, } } </script> <style lang="scss" scoped> </style>
子組件代碼如下:
<template> <span> <input ref="input" :value="value" @input="$emit('balabala', $event.target.value)" > </span> </template> <script> export default { data(){ return{ } }, props: ["value"], model: { prop: 'value', event: 'balabala' } } </script> <style lang="scss" scoped> </style>
我們可以通過(guò)上面代碼,子組件修改父組件v-model綁定的值!
實(shí)現(xiàn)截圖如下:
v-model 的缺點(diǎn)和解決辦法
在創(chuàng)建類(lèi)似復(fù)選框或者單選框的常見(jiàn)組件時(shí),v-model就不好用了。
<input type="checkbox" v-model="haorooms" />
我們可以用如下方式解決:
<input type="checkbox" :checked="status" @change="status = $event.target.checked" />
父組件可以如下寫(xiě):
<my-checkbox v-model="haorooms"></my-checkbox>
子組件:
<input type="checkbox" <!--這里就不用 input 了,而是 balabala--> @change="$emit('balabala', $event.target.checked)" :checked="value" /> export default { data(){ return{ } }, props: ['checked'], //這里就不用 value 了,而是 checked model: { prop: 'checked', event: 'balabala' }, }
以上就是vue中怎么利用v-model指令實(shí)現(xiàn)父子組件通信,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專(zhuān)為企業(yè)上云打造定制,能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)頁(yè)標(biāo)題:vue中怎么利用v-model指令實(shí)現(xiàn)父子組件通信-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載:http://www.muchs.cn/article44/deoiee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、服務(wù)器托管、電子商務(wù)、網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、全網(wǎng)營(yíng)銷(xiāo)推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容