今天就跟大家聊聊有關(guān)Vue中怎么利用父組件向子組件通信,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)建站于2013年開始,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命,1280元鷹手營子做網(wǎng)站,已為上家服務(wù),為鷹手營子各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108props
組件實(shí)例的作用域是孤立的。子組件的模板中是無法直接調(diào)用父組件的數(shù)據(jù)。
可以使用props將父組件的數(shù)據(jù)傳給子組件。子組件在接受數(shù)據(jù)時(shí)要顯示聲明props
看下面的例子
<div id="app"> <panda here='China'></panda> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script> Vue.component('panda',{ props:['here'], template:`<div>panda from {{here}}</div>` }) new Vue({ el: '#app' }) </script>
頁面上展示的是 panda from China
處理屬性中帶'-‘的問題
Vue是不支持帶杠的寫法的。
如果上述的here變成from-here。需要這樣寫(小駝峰的寫法)
<div id="app"> <panda from-here='China'></panda> </div> <script> Vue.component('panda',{ props:['fromHere'], template:`<div>panda from {{fromHere}}</div>` }) new Vue({ el: '#app' }) </script>
如果需要?jiǎng)討B(tài)綁定,需要用到v-bind
<body> <div id="app"> <panda :here='msg'></panda> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script> Vue.component('panda',{ props:['here'], template:`<div>panda from {{here}}</div>` }) new Vue({ el: '#app', data:{ msg:'China' } }) </script> </body>
這樣子組件就展示出了父組件的信息(把構(gòu)造器中的data值傳遞給組件)。而且是動(dòng)態(tài)綁定(用了v-bind)的。當(dāng)父組件的data.msg發(fā)生變化的時(shí)候。子組件里面的內(nèi)容也會(huì)相應(yīng)的發(fā)生變化。
注意:props默認(rèn)是單向綁定:當(dāng)父組件的屬性變化時(shí),將傳導(dǎo)給子組件,但是反過來不會(huì)。這是為了防止子組件無意修改了父組件的狀態(tài)
看完上述內(nèi)容,你們對(duì)Vue中怎么利用父組件向子組件通信有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道,感謝大家的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章題目:Vue中怎么利用父組件向子組件通信-創(chuàng)新互聯(lián)
文章地址:http://muchs.cn/article48/hecep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供云服務(wù)器、網(wǎng)站收錄、營銷型網(wǎng)站建設(shè)、網(wǎng)站營銷、微信公眾號(hào)、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容