Vue中怎么利用父組件向子組件通信-創(chuàng)新互聯

今天就跟大家聊聊有關Vue中怎么利用父組件向子組件通信，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

創(chuàng)新互聯建站于2013年開始，是專業(yè)互聯網技術服務公司，擁有項目網站設計制作、做網站網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元鷹手營子做網站,已為上家服務,為鷹手營子各地企業(yè)和個人服務,聯系電話:18982081108

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>

如果需要動態(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>

這樣子組件就展示出了父組件的信息(把構造器中的data值傳遞給組件)。而且是動態(tài)綁定（用了v-bind）的。當父組件的data.msg發(fā)生變化的時候。子組件里面的內容也會相應的發(fā)生變化。

注意：props默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態(tài)

看完上述內容，你們對Vue中怎么利用父組件向子組件通信有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創(chuàng)新互聯網站建設公司行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務器可以了解下創(chuàng)新互聯建站bm7419.com，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章題目：Vue中怎么利用父組件向子組件通信-創(chuàng)新互聯
文章地址：http://bm7419.com/article48/hecep.html

成都網站建設公司_創(chuàng)新互聯，為您提供云服務器、網站收錄、營銷型網站建設、網站營銷、微信公眾號、App開發(fā)

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容