上一篇學習使用props接收上層傳來的資料( 字串 )，今天來學習如何動態綁定props：

使用v-bind :動態綁定

<div id="app">
  <test :text="text"></test>
</div>

<script>
new Vue({
  el:"#app",
  data:{
    text:"hello",
  },
  components:{
    test:{
      props:["text"],
      template: "<div>{{text}}</div>"
    }
  }
  
});
</script>

使用v-for

<div id="app">
  <test v-for="text in strings" :text="text"></test>
</div>

<script>
new Vue({
  el:"#app",
  data:{
    strings:["str1", "str2"]
  },
  components:{
    test:{
      props:["text"],
      template: "<div>{{text}}</div>"
    }
  }
  
});
</script>

當data為物件

沿用上面範例當data是物件時，props指定對應的值string.name、strings.email，成功render出兩組人名及email：

<div id="app">
  <test v-for="text in posts" :name="text.name" :email="text.email"></test>
</div>

<script>
new Vue({
  el:"#app",
  data:{
    posts:[
      {name:"Henry", email:"henry@hotmail.com"},
      {name:"Coco", email:"coco@gmail.com"}
    ]
  },
  components:{
    test:{
      props:["name","email"],
      template: "<div>{{name}}:{{email}}</div>"
    }
  }
});

render：

<div>Henry:henry@hotmail.com</div>
<div>Coco:coco@gmail.com</div>

但如果一組有好幾欄資料的話props要一個 一個指定超長的，這時候就可以用v-bind：

<div id="app">
  <!--<test v-for="text in posts" :name="post.name" :email="text.email"></test>-->
  <test v-for="text in posts" v-bind="text"></test>
</div>

當要把一個物件裡面的屬性全部指定給一個component的話，除了一個一個資料來綁定之外還可以用v-bind="資料屬性"，這樣就會直接把所有資料裡的屬性分別指定給component當成他的props,，不用一個一個去指定。