Vue 用 porps 把父層的資料傳給 child component

just an example，

HTML:

<!--準備 CardComponent 的 Template-->
<script type="x-template" id="cards-tmp">
  <div id="cards-tmp">
    <div class="card" v-for="card in cards">
      <h2>{{ card.title }}</h2>
      <p>{{ card.description }}</p>
      <a href="#" v-on:click.prevent="openModal(card.id)">read more</a>
  </div>
</script>
  
<div id="app">
  <h1>Vue App Example</h1>
  <div>
    <card-comp :cards="cardOriginal"></card-comp>  
  </div>
</div> 

JS

// make an component
var cardComponent = Vue.extend({
  // 指定是哪個 Element
  template: '#cards-tmp',
  // what props you want to accept.
  props: ['cards'],
  methods: {
    openModal: function(id){
      alert(id);
    }
  }
});

new Vue({
    el: '#app',
    components: {
      // register name is card-comp
      'card-comp': cardComponent
    },
    data: {
      cardOriginal: [
        {
          id: 123,
          title: 'Hello Vue',
          description: 'Good Morning!'
        },
        {
          id: 123,
          title: 'Hello Vue',
          description: 'Good Morning!'
        }
      ]
    }
  
});

jsbin:
JS Bin on jsbin.com

參考:
https://github.com/vuejs/vue/issues/1987