Vue.jsでcomponentsに親からデータがわたらない時に確認する2つのこと

Vue.jsはコンポーネントを利用てUIの親子関係にルールを持って記述できるようなフレームワークになっています。

その仕組みの一つにpropsというコンポーネント(子ども側)のルールがあります。
これは何かというと、コンポーネント側のオブジェクトにpropsとプロパティを用いて親の$dataのキーを書かなければ親の$dataに触ることができないというルールです。このルールにより親・子間のデータの流れが一方通行になり、両者の責任範囲の漏れ出しを防ぐことができます。

古いバージョンの時に一度記事を書いていますが、今回はバージョン1系、且つ、つまずきポイントのみに着目します。 www.ie-kau.net

1.props

前置きにも書いてしまいましたが、触りたい親の$dataのpropsを必須で書かなくてはなりません。これを忘れると、コンポーネント内でそのデータはundefinedになってしまいます。

例えばモーダルのポップアップ部分をコンポーネントとして作成したらこんなイメージ

Vue

Vue.component('v-modal-modal', require('./components/modal.vue'));

new Vue({
  el: '#js-vue',

  data: {
    modalData: {
      title: 'モーダルのタイトル',
      buttonText: 'OK',
      message: 'モーダルのメッセージ'
    }
  },

  methods: {
     // 略
  }
}

テンプレート

<div class="modal">
    <header>
        <div class="title">{{modalData.title}}</div>
    </header>
    <div class="message">
        {{{modalData.message}}}
    </div>
    <footer>
        <button>{{modalData.buttonText}}</button>
    </footer>
</div>

コンポーネント

module.exports = {
    props: ['modalData'], // ここを忘れると動かない

    methods: {
        open() {
            // 開く
        },

        close() {
            // 閉じる
        }
    }
}

2.独自タグ

propsに追加するだけでは、コンポーネントで利用する独自タグのテンプレートで親から渡された$dataを利用することはできません。 ドキュメントには書いてあるのですが、通常のVMと違い明示的に独自タグに渡す必要があるので見落としがちです。

バインディングしないと動かない

動かない例①

<v-modal></v-modal>

バインディングすると動く

<v-modal :modal-data="modalData"></v-modal>

また、バインディングに利用する属性はHTMLの大文字小文字を区別しない(case-insensitive)仕様に則らなければならないので、ケバブケース(ハイフン区切り)に変換して記述する必要があります。

動かない例

<v-modal :modalData="modalData"></v-modal>

ケバブケース

<v-modal :modal-data="modalData"></v-modal>

※この辺参考

まとめ

丁寧にドキュメントに書いてあるのですがあまり読まずにやってたら、キャメルケースの変数のバインディング方法の場所で1時間ぐらいはまっていました。丁寧に読み込んでおけばよかった。。

(´ω｀)ｵﾗｯｵﾗｯ

参考書籍

基礎から学ぶ Vue.js

Vue.js入門 基礎から実践アプリケーション開発まで