溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue中如何利用父組件向子組件通信的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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中如何利用父組件向子組件通信”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue中如何利用父組件向子組件通信”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
