溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關Vue中怎么利用父組件向子組件通信，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
props
組件實例的作用域是孤立的。子組件的模板中是無法直接調用父組件的數據。
可以使用props將父組件的數據傳給子組件。子組件在接受數據時要顯示聲明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>如果需要動態綁定，需要用到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>這樣子組件就展示出了父組件的信息(把構造器中的data值傳遞給組件)。而且是動態綁定（用了v-bind）的。當父組件的data.msg發生變化的時候。子組件里面的內容也會相應的發生變化。
注意：props默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態
看完上述內容，你們對Vue中怎么利用父組件向子組件通信有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
