ナビゲーションバーコンポーネントをVueでカプセル化する

//タブバーアイテム.vue
<テンプレート>
  <div class="tabBarItem" @click="tabBarItemClick">
    <div v-if="!isActive">
      <スロット名="アイテムアイコン"></スロット>
    </div>
    <div v-else>
      <スロット名="アイテムアイコンアクティブ"></スロット>
    </div>
    <div:style="isActiveColor"> は、
      <スロット名="アイテムテキスト"></スロット>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:"タブバーアイテム",
  小道具:{
    パス:文字列、
    アクティブカラー:{
      タイプ:文字列、
      デフォルト:"ピンク"
    }
  },
  計算:{
    アクティブ:{
      得る（）{
        this.$route.path.indexOf(this.path)!=​​=-1 を返します。
      },
      セット（）{}
    },
    isActiveColor(){
      this.isActive?{color:this.activeColor}:{} を返します。
    }
  },
  方法:{
    タブバーアイテムクリック(){
      this.$router.push(this.path);
    }
  }
}
</スクリプト>

<スタイルスコープ>
.tabBarItem{
  フレックス: 1;
  フォントサイズ: 12px;
}
.tabBarItem画像{
  上マージン: 3px;
  幅: 24px;
  パディング下部:3px;
}
</スタイル>

//タブバー.vue
<テンプレート>
  <div class="tabBar">
    <スロット></スロット>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:"タブバー"
}
</スクリプト>

<スタイルスコープ>
.タブバー{
  ディスプレイ: フレックス;
  高さ: 49px;
  位置: 固定;
  左: 0;
  右: 0;
  下部: 0;
  テキスト配置: 中央;
  ボックスの影: 0px -1px 1px rgba(100, 100, 100, .1);
  背景色: #f6f6f6;
}

</スタイル>

//メインタブバー.vue
<テンプレート>
  <div class="mainTabBar">
    <タブバー>
      <タブバー項目パス="/home" activeColor="#ff8198">
        <img src="~assets/img/tabbar/home.svg" alt="" slot="item-icon">
        <img src="~assets/img/tabbar/home_active.svg" alt="" slot="item-icon-active">
        <div slot="item-text">ホーム</div>
      </タブバー項目>
      <タブバー項目パス="/カテゴリ" activeColor="#ff8198">
        <img src="~assets/img/tabbar/category.svg" alt="" slot="item-icon">
        <img src="~assets/img/tabbar/category_active.svg" alt="" slot="item-icon-active">
        <div slot="item-text">カテゴリー</div>
      </タブバー項目>
      <タブバーアイテムパス="/カート" activeColor="#ff8198">
        <img src="~assets/img/tabbar/shopcart.svg" alt="" slot="アイテムアイコン">
        <img src="~assets/img/tabbar/shopcart_active.svg" alt="" slot="item-icon-active">
        <div slot="item-text">ショッピングカート</div>
      </タブバー項目>
      <タブバー項目パス="/プロファイル" activeColor="#ff8198">
        <img src="~assets/img/tabbar/profile.svg" alt="" slot="item-icon">
        <img src="~assets/img/tabbar/profile_active.svg" alt="" slot="item-icon-active">
        <div slot="item-text">マイ</div>
      </タブバー項目>
    </タブバー>
  </div>
</テンプレート>

<スクリプト>
「components/common/tabbar/TabBar」からTabBarをインポートします。
「components/content/tabbar/TabBarItem」からTabBarItemをインポートします。
エクスポートデフォルト{
  名前:"メインタブバー",
  コンポーネント:{
    タブバー、
    タブバーアイテム
  }
}

</スクリプト>
<スタイル>

</スタイル>

<テンプレート>
  <div id="アプリ">
    <メインタブバー></メインタブバー>
  </div>
</テンプレート>

<スクリプト>
「components/content/tabbar/MainTabBar」からMainTabBarをインポートします。
エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:{
    メインタブバー
  }
}