最終更新:2018-03-26 (月) 18:49:32 (2216d)  

Vue.js/コンポーネント
Top / Vue.js / コンポーネント

https://jp.vuejs.org/v2/guide/components.html

概要

  • 一度登録すると、コンポーネントはカスタム要素 <my-component> として親のインスタンスのテンプレートで使用できます。
↑

コンポーネントの命名の慣習

  • コンポーネント(またはプロパティ)を登録する時、ケバブケース、キャメルケース、パスカルケースを使うことができます。 
    //コンポーネント内での定義
components: {
  // ケバブケースを使った登録
  'kebab-cased-component': { /* ... */ },
  // キャメルケースを使った登録
  'camelCasedComponent': { /* ... */ },
  // パスカルケースを使った登録
  'PascalCasedComponent': { /* ... */ }
}
  • しかし、HTML テンプレートの中では、ケバブケースを使用する必要があります。 
    <!-- HTMLテンプレートの中では、常にケバブケースを使用する -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>
↑

例 

  • <div id="example">
  <my-component></my-component>
</div>
    // 登録する
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// root インスタンスを作成する
new Vue({
  el: '#example'
})
↑

定義

↑

Vue.component 

  • // todo-item と呼ばれる新しいコンポーネントを定義
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})
↑

プロパティ

  • 親コンポーネントからの情報を伝えるためのカスタム属性 
    Vue.component('child', {
  // プロパティを宣言します。
  props: ['message'],
  // 単なるデータのように、プロパティは内部テンプレートで使用することができ、
  // そして this.messageとして、vm の中で利用可能になります。
  template: '<span>｛｛ message ｝｝</span>'
})
↑

例

  • groceryListからv-forでitemとして取り出してそれをリスト表示 
    Vue.component('todo-item', {
  // todo-item コンポーネントはカスタム属性のような "プロパティ" で受け取ります。
  // このプロパティは todo と呼ばれます。
  props: ['todo'],
  template: '<li>｛｛ todo.text ｝｝</li>'
})

<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
↑

ローカル登録 

  • var Child = {
  template: '<div>A custom component!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> は親テンプレートでのみ有効になります
    'my-component': Child
  }
})
↑

キャメルケース

  • HTML の属性は大文字と小文字を区別しません。
  • そのため、非文字列テンプレートを使用する場合、キャメルケースのプロパティ名を""属性""として使用するときは、それらをケバブケース? (kebab-case: ハイフンで句切られた) にする必要があります: 
    Vue.component('child', {
  // JavaScript ではキャメルケース
  props: ['myMessage'],
  template: '<span>｛｛ myMessage ｝｝</span>'
})
<!-- HTML ではケバブケース -->
<child my-message="hello!"></child>
  • 繰り返しになりますが、もし文字列テンプレートを使用する場合は、この制限は適用されません。
↑

単方向データフロー

  • すべてのプロパティは、子プロパティと親プロパティの間の単方向 (one-way-down) バインディングを形成します: 親プロパティが更新したとき、それは子プロパティに伝わり、その反対はありません。
↑

メモ

  • 2.2.0 以降で、コンポーネントで v-for を使用するとき、key は必須です
↑

属性

  • コンポーネントはコンポーネントのルート要素に追加される任意の属性を受け入れることができます。
↑

動的コンポーネント

↑

関連




検索：