2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同

前端OnTheRun

已于 2022-10-29 19:07:23 修改

阅读量324

点赞数

分类专栏： vue学习笔记 vue项目-卖座电影文章标签： vue.js javascript 前端

于 2021-12-14 22:11:23 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/121941309

版权

本文介绍了在Vue移动端卖座电影项目中，如何在进入详情页时隐藏底部选项卡。通过中央事件总线(eventbus)、vuex的state和mutation以及mapState来控制tabbar的v-show值。特别地，使用mapState可以在计算属性中简洁地实现tabbar的显示控制。同时，文章还提到了ES6的扩展运算符在按需导入中的应用，以提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

0.实现场景:进入详情页时,底部选项卡隐藏

在这里插入图片描述

1.使用中央事件总线控制tabbar的v-show的值

在App.vue中Eventbus.$on(),在Detail.vue中Eventbus.$emit(),两者的第一个参数"xianshi"要保持一致
src/eventbus.js

import Vue from "vue"
export default new Vue();

App.vue

<template>
  <div class="wrapper">
    <!-- 把选项卡中的电影,个人中心等封装到单独组件tabbar中 -->
    <tabbar v-show="showTabbar"></tabbar>
    <router-view></router-view>
  </div>
</template>
<script>
  import tabbar from "./components/tabbar" // 导入组件tabbar
  import Eventbus from "./eventbus" // 导入Eventbus
   export default {
     
      name: "App",
      data(){
     
        return{
     
          showTabbar:true//初始化showTabbar
        }
      },
      components: {
     
          tabbar,//注册tabbar组件
      },
      mounted(){
     
        Eventbus.$on('xianshi',(data)=>{
     
          this