Vue.js 2.1 のコンポーネントを使ってみた

やること

以前こんな掲示板 f:id:yjhm214:20170105214532p:plain を作った。

www.yjhm214.com

今回はこれのコードをそのまま使って、コメント表示部分をコンポーネント化する。

コンポーネント化する場所

ここ f:id:yjhm214:20170119141518p:plain

コード的には

<div class="comment" v-for="comment in comments">
  <h2>Comment #(% comment.id %) <small>by (% comment.name %)</small></h2>
  <p>(% comment.comment %)</p>
</div>

を

<div class="comment" v-for="comment in comments">
  <v-comment v-bind:params="comment"></v-comment>
</div>

てな感じに、<div class="comment"></div> の中を <v-comment></v-comment> というコンポーネントにする。

前提

Lumen 5.3.3
Vue.js 2.1.4

つくりかた

html の修正

上でも書いたが、まずは html を修正する。

<div class="comment" v-for="comment in comments">
  <h2>Comment #(% comment.id %) <small>by (% comment.name %)</small></h2>
  <p>(% comment.comment %)</p>
</div>

この部分を

<div class="comment" v-for="comment in comments">
  <v-comment v-bind:params="comment"></v-comment>
</div>

と書き換える。

スクリプトの修正

次にスクリプトの Vue インスタンスを生成している部分の上に以下のコードを追加。

Vue.component('v-comment', {
  delimiters: ['(%', '%)'],
  props: ['params'],
  template: '<div><h2>Comment #(% params.id %) <small>by (% params.name %)</small></h2><p>(% params.comment %)</p></div>',
})

new Vue ({
  ・・・
})

これで修正前と変わらず表示されればOK！

解説

まずはここ↓から解説していく。

Vue.component('v-comment', {
  delimiters: ['(%', '%)'],
  props: ['params'],
  template: '<div><h2>Comment #(% params.id %) <small>by (% params.name %)</small></h2><p>(% params.comment %)</p></div>',
})

Vue.js では、コンポーネントを登録するのに Vue.component(tagName, options) メソッドを使う。
ここでは、 v-comment とういタグ名でコンポーネントを登録している。

次にそれぞれのプロパティについて、

delimiters

Lumen で使っている bladeのデリミタが {{ }} なので、Vue.js とのコンフリクトを回避するためデリミタを (% %) に変更している。その指定部分。

props

html 親要素からデータをもらうためのプロパティ。

<div class="comment" v-for="comment in comments">
  <v-comment v-bind:params="comment"></v-comment>
</div>

の v-bind:params="comment" の部分で、params という変数に v-forディレクティブでループさせている comment の中身を入れている。
ここで、v-bind: がないと動的データを取得できず、単純に "comment" という文字列を params に代入してしまうので注意！