コンポーネント 親→子

component prop

by sarunokoshikake

HTML

<div id="fruits-component">
  <ol>
    <!-- v-bind でコンポーネントにデータを渡す -->
    <fruits-list v-for="fruit in fruitsItems" v-bind:fruits-item="fruit">
    </fruits-list>
  </ol>
</div>

JavaScript

// 子
Vue.component('fruits-list', {
  props: ['fruitsItem'],
  template: '<li>{{fruitsItem.name}}</li>'
});
// 親
new Vue({
  el: '#fruits-component',
  data: {
    fruitsItems: [
      {name: '梨'},
      {name: 'イチゴ'}
    ]
  }
});