Vue中父組件向子組件通信的方法

更新時間：2017年07月11日 08:34:54 作者：cofecode

可以使用props將父組件的數(shù)據(jù)傳給子組件。子組件在接受數(shù)據(jù)時要顯示聲明props。下面通過一個例子給大家介紹Vue中父組件向子組件通信的方法，需要的朋友參考下吧

Vue是一個輕量級的漸進(jìn)式框架，對于它的一些特性和優(yōu)點(diǎn)在此就不做贅述。下面通過本文給大家分享Vue中父組件向子組件通信的方法，具體內(nèi)容詳情如下所示：

props

組件實(shí)例的作用域是孤立的。子組件的模板中是無法直接調(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)

以上所述是小編給大家介紹的Vue中父組件向子組件通信的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: