【props】Vue.jsでメインバーをお洒落に実装する - 山下誠二郎のITとフォートナイトと野球ブログ

前書き

Vue.jsでメインバーを実装します。
可読性を向上させるためにメインバーについて記述したMainBar.vueと
その親であるApp.vue間をpropsを使ったデータの渡しについて勉強します。

使用したパッケージ

vue-router
vuetify

親コンポーネント（App.vue）

親コンポーネントであるApp.vueは簡潔に書きたかったので、
Mainbar.vueを作成し、コンポーネントを読み込んで使用することにします。
こうすることでバグ修正の際もどこを編集すれば良いか明確になります。

以下のように書くことで、templateタグの内側にMainBarタグとして使用することができます。

import MainBar from './components/Mainbar'

export default {
    components: { MainBar },
}

メインバーではHome、Profile、Serviceの3つのタブを用意します。
あらかじめ親コンポーネントから子コンポーネントにデータを渡す際に、
Mainbarタグの後ろに、"v-bind:hoge"と書くといいですが、
"v-bind"を省略して":hoge(任意)"と書くこともできます。

"hoge"については今回は"my-page"と書いており、
ここは子コンポーネントで記述したpropsに関係します。

<template>
    <v-app>
　  ・・・
      <MainBar :my-pages="pages"
               @input="currentId=$event"></MainBar>
      ・・・
   </v-app>
</template>

<script>
import MainBar from './components/Mainbar'

export default {
    components: { MainBar },
    data() {
        return {
            currentId: 1,
            pages: [
                { id: 1, name: 'Home', path: '/'},
                { id: 2, name: 'Service', path: '/service' },
                { id: 3, name: 'Profile', path: '/profile' },
            ]
        }
    },
    computed: {
      active() {
        return this.value === this.id ? 'active' : false
      }
    }
}
</script>

子コンポーネント（MainBar.vue）

props（配列）では親から子にデータを渡す際に、
使いたいプロパティをここに記載します。
子では"myPage"、親では"my-page"としました。
これは書き方の違いで、Vueの世界では同義となるようです。

v-tabの後ろに":to"とパラメータを付けることで、
vue-routerが発動すると思われます。
実質、router-linkタグですので、
ページ遷移時にサーバーへアクセスせずに軽く早い遷移が可能になっています。

<template>
     <v-app-bar>

・・・

     <template v-slot:extension>
        <v-tabs align-with-title>
            <v-tab v-for="page in myPages" :key="page.id" :to="page.path">
                {{ page.name }}
            </v-tab>
        </v-tabs>
      </template>

      </v-app-bar>
</template>

<script>
export default {
    // myPage
    props: {
        myPages: Array,
    },
}
</script>