Vue中父組件向子組件通信的方法
Vue是一個(gè)輕量級(jí)的漸進(jìn)式框架，對(duì)于它的一些特性和優(yōu)點(diǎn)在此就不做贅述。下面通過(guò)本文給大家分享Vue中父組件向子組件通信的方法，具體內(nèi)容詳情如下所示：
props
組件實(shí)例的作用域是孤立的。子組件的模板中是無(wú)法直接調(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>
頁(yè)面上展示的是 panda from China
處理屬性中帶'-‘的問(wèn)題
Vue是不支持帶杠的寫(xiě)法的。
如果上述的here變成from-here。需要這樣寫(xiě)(小駝峰的寫(xiě)法)
<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)給子組件，但是反過(guò)來(lái)不會(huì)。這是為了防止子組件無(wú)意修改了父組件的狀態(tài)
以上所述是小編給大家介紹的Vue中父組件向子組件通信的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue中如何創(chuàng)建多個(gè)ueditor實(shí)例教程
這篇文章主要給大家介紹了關(guān)于vue中如何創(chuàng)建多個(gè)ueditor的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
最近公司項(xiàng)目有個(gè)導(dǎo)出ppt的功能,在使用ppexgen.js一周完成功能之后,這篇文章主要給大家介紹了關(guān)于前端vue如何使用pptxgen.js導(dǎo)出PPT的相關(guān)資料,需要的朋友可以參考下2024-01-01
解決Vue中引入swiper,在數(shù)據(jù)渲染的時(shí)候,發(fā)生不滑動(dòng)的問(wèn)題
今天小編就為大家分享一篇解決Vue中引入swiper,在數(shù)據(jù)渲染的時(shí)候,發(fā)生不滑動(dòng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
關(guān)于vue?src路徑動(dòng)態(tài)拼接的小知識(shí)
這篇文章主要介紹了vue?src路徑動(dòng)態(tài)拼接的小知識(shí)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-04-04
vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())
在項(xiàng)目開(kāi)發(fā)中我遇到了日期范圍選擇器,兩種獲取當(dāng)前日期并做處理的寫(xiě)法,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue父組件給子組件的組件傳值provide inject的方法
在本篇文章里小編給大家整理的是一篇關(guān)于vue父組件給子組件的組件傳值provide inject的方法，需要的朋友們學(xué)習(xí)下。2019-10-10
Vue入門(mén)之?dāng)?shù)據(jù)綁定(小結(jié))
本篇文章主要介紹了探索Vue高階組件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Vue3實(shí)現(xiàn)可視化拖拽標(biāo)簽小程序功能
這篇文章主要介紹了Vue3實(shí)現(xiàn)可視化拖拽標(biāo)簽小程序,實(shí)現(xiàn)功能可視化標(biāo)簽拖拽，雙擊標(biāo)簽可修改標(biāo)簽內(nèi)容，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
今天小編就為大家分享一篇關(guān)于vue中輪訓(xùn)器的使用，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01