Vue.js 入門 #4 – コンポーネントの利用

Vue.js を利用したWebアプリケーション開発の手法を紹介していきます。
第四回目は Vue.js の コンポーネントについて紹介していきます。

コンポーネントの利用

Vue.js はデータバインディングと並び Vue.js の主要機能の一つです。

コンポーネントを利用する事で複雑なWebアプリケーションを複数のファイルに分割して記述することが出来るようになります。

次のようなシンプルな Vue ファイルを src/Message.vue という名前で作成してみましょう。

<template>
  <div>
      {{message}}
  </div>
</template>

<script>
export default { 
  data(){
    return {
      message: "hello world"
    }
  }
}
</script>

src/App.vue からこれを参照するには、以下のように記述します。

<template>
  <div id="app">
    <app-message></app-message>
  </div>
</template>

<script>
import Message from "./Message.vue"

export default { 
  components: {
    "app-message": Message
  }
}
</script>

コンポーネントの登録は、componentsで行います。

キー名にHTML要素名を、値に import文で読み込んだ別ファイルの vue オブジェクトを指定して、
HTML 内で 要素名を記述すれば用意は完了です。

上記の components の記述は、以下の用に記述することも出来ます。

export default { 
  components: {
    AppMessage: Message
  }
}

キャメルケースで記述したコンポーネントのキーは、自動的にケバブケースに変換されて app-messageコンポーネントが利用可能になります。

よって通常は以下のように import を行う事が多いでしょう。

<script>
import AppMessage from "./Message.vue"

export default { 
  components: {
    AppMessage
  }
}
</script>

プロパティによる値の伝搬

コンポーネントを利用する側(親)は、利用されるコンポーネント(子)に対して値を渡すことが出来ます。

親は 値を渡す子に対して、属性で渡す値を指定します。

<template>
  <div id="app">
    <app-message message="hello world"></app-message>
  </div>
</template>

<script>
import Message from "./Message.vue"

export default { 
  components: {
    "app-message": Message
  }
}
</script>

子は props を用いて、受け取るデータを指定します。

<template>
  <div>
      {{message}}
  </div>
</template>

<script>
export default { 
  props: ["message"]
}
</script>

もちろん親から渡す値には、変数を使用することも出来ます。

<template>
  <div id="app">
    <app-message :message="parentMessage"></app-message>
  </div>
</template>

<script>
import AppMessage from "./Message.vue"

export default {
  data(){
    return {
      parentMessage: "this is parent message"
    }
  }
  components: { AppMessage }
}
</script>

もちろんこの場合、親コンポーネントで parentMessage が変更された場合、その変更は 子コンポーネントに通知されます。

プロパティの検証

props は配列で記述するのでなく、オブジェクト形式で記述してその値の種別を指定する事が出来ます。

<script>
export default { 
  props: {
    message: String
  }
}
</script>

上記の例では String で文字列の値のみが渡されるよう指定します。

指定されたデータの型は、コンポーネントが利用される際に検証が実施され、指定された型と異なるデータが渡された際にエラーが発生します。

コンポーネントには、他にも様々な機能が用意されています。詳しくは公式ガイドをご確認ください。

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

コンポーネントと v-for

v-for で繰り返しDOM要素を表示する際にも コンポーネントは便利です。ただし、v-for で コンポーネントを利用する際にはいくつかの注意が必要です。

v-for でコンポーネントを利用する際には key 属性を指定しなければならない

key は v-forで繰り返し値を表現する際に、それぞれの要素を区別するためのインデックスです。

<app-message v-for="(message,key) in messages" :key="key" :message="message"></app-message>

ul>litbody>tr 等の特定のHTML 要素が仕様上要求される場合は is を使用する

<todo-item> などのカスタムコンポーネントタグは、 <li is="todo-item"> の様に記述することも出来ます。

これは ul 内で li を使用したいときや tbody 内で tr を使用したいケースなどで便利です。

<ul>
    <li is="todo-item" v-for="(item,key) in items" :key="key"></li>
</ul>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です