icon props を利用したコンポーネント (2019/07/28)
props は親コンポーネントのデータを v-bind で、子コンポーネントにバインドできる。
v-bind(HTML) に設定するデータバインド名は、ケバブケース(kebab-case)
props(Javascript) 側のデータバインド名は、パスカルケースで記述
    //子コンポーネント
    Vue.component('コンポーネント名', {
      props: {
        データバインド名: {
          type: 型
        }
      },
      template: '<p>{{データバインド名}}</p>'
    })

    //親コンポーネント
    new Vue({
      el: 'エレメント名',
      data: { データ }
    })

サンプル(Vue.js入門 基礎から実践アプリケーション開発まで:第3章)

HTML

  <div id="item-component">
    <item-desk v-bind:item-name="item"></item-desk>
    //ケバブケース: item-name
  </div>

Javascript

    Vue.component('item-desk', {
      props: {
        itemName: {    //パスカルケース: itemName
          type: String
        }
      },
      template: '<p>{{itemName}}</p>'
    })

    new Vue({
      el: '#item-component',
      data: { item: 'Pen'}
    });
HTML(v-bind): item-name
Javascript: itemName

HTML

  <div id="fruits-component">
    <fruits-item-name v-for="fruit in fruitsItems" :fruits-item="fruit"></fruits-item-name>
    //v-bind を省略したケバブケース: :fruits-item
  </div>

Javascript

    Vue.component('fruits-item-name', {
      props: {
        fruitsItem: {   //パスカルケース: fruitsItem
          type: Object,  //オブジェクト型
          requited: true    //必須
        }
      },
      template: '<p>{{fruitsItem.name}}</p>'
    })

    new Vue({
      el: '#fruits-component',
      data: {
        fruitsItems: [
          { name: 'Pear'},
          { name: 'Strawbery'}
        ]
      }
    })