2021-12-09 vue移动端卖座电影项目(九) 使用事件总线EvenetBus控制选项卡tabbar的显隐(进入入详情页时隐藏)

0.事件总线复习

2021-10-21 vue笔记-组件化开发(四) 组建通信:非父子通信-事件总线,在vue项目中使用eventbus的例子

1.显隐逻辑

Detail.vue

  beforeMount(){
    console.log("隐藏tabbar...");
  },
 mounted(){
...
 },
  beforeDestroy(){
      console.log("显示tabbar...");
  },

2.Detail.vue和它要控制的tabbar.vue不是父子关系

3.使用中央事件总线来控制

思路是组件化开发,创建全局的中央事件总线EventBus

• 利用现有文件src/Eventbus.js

import Vue from "vue"
// export default new Vue();
const Eventbus = new Vue();
export default Eventbus

• 给tabbar的占位符加v-show判断,在App.vue中引入Eventbus并接收事件’xianshi’
  App.vue

   <template>
  <div class="wrapper">
    <!-- 轮拨图组件 -->
    <!-- 把选项卡中的电影,个人中心等封装到单独组件tabbar中 -->
    <tabbar v-show="showTabbar"></tabbar>
    <router-view></router-view>
  </div>
</template>
<script>
  // 导入组件tabbar
  import tabbar from "./components/tabbar"
  // 导入Eventbus
  import Eventbus from "./eventbus"
  export default {
      name: "App",
      data(){
        return{
          showTabbar:true
        }
      },
      components: {
          tabbar,
      },
      mounted(){
        Eventbus.$on('xianshi',(data)=>{
          console.log("是否显示:",data);
        })
      }
  }; 
</script>

• 在Detail.vie引入Eventbus并触发事件’xianshi’
  Detail.vue

// 引入事件总线
import Eventbus from "../eventbus"
export default {
  beforeMount(){
    //console.log("隐藏tabbar...");
    Eventbus.$emit('xianshi',false);
  },
 mounted(){
...
 },
  beforeDestroy(){
      //console.log("显示tabbar...");
      Eventbus.$emit('xianshi',true);
    }, 

• 把data赋给v-show的自定义属性showTabbar
  App.vue

      mounted(){
        Eventbus.$on('xianshi',(data)=>{
          this.showTabbar=data;
        })
      }

4.效果

http://localhost:8081/#/Film/nowPlaying中底部tabbar显示

http://localhost:8081/#/Detail/6112中tabbar消失