Vue中怎么利用父組件向子組件通信

發(fā)布時間：2021-07-09 12:01:12 來源：億速云閱讀：141 作者：Leah 欄目：web開發(fā)

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

props

組件實例的作用域是孤立的。子組件的模板中是無法直接調(diào)用父組件的數(shù)據(jù)。

可以使用props將父組件的數(shù)據(jù)傳給子組件。子組件在接受數(shù)據(jù)時要顯示聲明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>

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

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

看完上述內(nèi)容，你們對Vue中怎么利用父組件向子組件通信有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

Vue中怎么利用父組件向子組件通信

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽