Vue.jsのvue-routerを使ってネストしたコンポーネントにプロパティを受け渡す

はじめに

Vue.jsを使ってアプリを開発しているものの、まだまだ勉強することが多いです。

今回、以下のような方を対象に記事を作成しています。

• vue-routerを使ってルーティング、コンポーネントの管理をしている
• ネストしたコンポーネントに対して、プロパティの値を受け渡したい
• URLのパスを使ったマッチングで値を受け渡すのではなく、テンプレート内で解決したい

前提

プロジェクトはvue-cliを使って初期化されたものを使用しています。

$ vue init webpack my-project

手順

vue-routerを使用して単一コンポーネントを取り込む

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/Parent'
import Child from '@/components/Child'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: '/',
          components: {
            child: Child
          }
        }
      ]
    }
  ]
})

src/components/Parent.vue

<template>
  <div class="parent-sample">
    <h2>Parent</h2>
    <input type="text">
    <!-- 単一コンポーネントを取り込み -->
    <router-view name="child"/>
  </div>
</template>
<script>
</script>

src/components/Child.vue

<template>
  <div class="child-sample">
    <h2>Child</h2>
  </div>
</template>
<script>
</script>

ポイント

• index.jsのchildren内のコンポーネントの名称は、defaultではなく名前付きにすることで、今後複数のコンポーネントをネストすることになっても対応できる
• index.jsのchildren側のcomponentではなくcomponents

単一コンポーネントにプロパティを設定する

ポイント

• router-viewにv-modelディレクティブを使ってプロパティを指定する。（今回のサンプルでは省略記法を採用）

src/router/index.js(変更なし)

import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/Parent'
import Child from '@/components/Child'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: '/',
          components: {
            child: Child
          }
        }
      ]
    }
  ]
})

src/components/Parent.vue

<template>
  <div class="parent-sample">
    <h2>Parent</h2>
    <input v-model="key2">
    <!-- 単一コンポーネントを取り込み -->
    <router-view name="child" :key1="key1" :key2="key2" />
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      key1: true,
      key2: 'foo'
    }
  }
}
</script>

src/components/Child.vue

<template>
  <div class="child-sample">
    <h2>Child</h2>
    <p>{{key1}}</p>
    <p>{{key2}}</p>
  </div>
</template>
<script>
export default {
  props: {
    key1: Boolean,
    key2: String
  }
}
</script>

まとめ

以上で、Vue.jsのvue-routerを使ってネストしたコンポーネントにプロパティを受け渡すサンプルが完成です。inputに入力した値がChildコンポーネントに反映されるはずです。

課題

vue-routerを使うとルーティングが非常に楽になるのですが、コンポーネントのネストがどれくらい深くできるのか調べていません。まぁ、深くならないように設計するのがベストとは思いますが。

参考(すべて公式ドキュメント)

プロパティ https://jp.vuejs.org/v2/guide/components-props.html
フォーム入力バインディング https://jp.vuejs.org/v2/guide/forms.html
名前付きビュー https://router.vuejs.org/guide/essentials/named-views.html