三十六、进阶之事件总线（非父子通信）--进入详情页隐藏底部的tabbar

实现功能：进入详情页时，隐藏页面底部的tabbar，退出详情页时，显示底部的tabbar

进入详情页（隐藏tabbar）

退出详情页（显示底部灰色的tabbar）

方法：用事件总线来实现

tabbar和Detail是非父子关系，对于这种非父子之间的通信（适用于项目中用到非父子通信的地方比较少的情况），引入事件总线可实现

（1）首先创建下面目录，并在bus/index.js中创建事件总线

(2) 在App.vue中用事件总线监听事件，在Detail.vue中用事件总线触发事件

操作的都是同一个总线。通过控制isshow的值，来决定是否显示tabbar

（2.1）在App.vue 监听事件

使用beforeMount是为了解决单独刷新detai页面时，tabbar不隐藏的问题。要在其之前触发

（2.2）在Detail.vue 触发事件，并传值

（3）代码

App.vue

<template>
  <div>
    <!--控制底部tabbar的显示-->
    <tabbar v-show="isshow"></tabbar>

    <!--路由容器，类似插槽。以便路由组件的显示-->
    <router-view></router-view>
  </div>
</template>

<script>

 //导入Tabbar组件
 import tabbar from '@/components/Tabbar'

 import axios from 'axios'
 //引入总线（监听）。index.js可省略（与Detail.vue中引入的都是同一个总线）
 import bus from '@/bus'

  export default{
    data(){
      return{
        datalist:[],
        isshow:true
      }
    },
    components: {//定义局部组件
      tabbar
    },

    beforeMount () {
      //监听事件maizuo（控制tabbar显示隐藏）。事件maizuo在Detail.vue中触发
      bus.$on("maizuo",(data)=>{ //data为事件触发时，穿过来的值
        //console.log("maizuo被通知了",data)
        this.isshow = data;
      })
    }
  }
  
</script>

<style lang="scss">
/*lang="scss"表示style中支持scss语法*/
*{
  margin: 0;
  padding: 0;
}
html{
  height: 100%;
}
li{
  list-style: none;
}
</style>

Detail.vue

<template>
    <!-- 避免filmlist为空报错的情况 -->
    <div v-if="filmlist"> 
        <img :src="filmlist.poster" class="poster">
        <h2>{{filmlist.name}}</h2>
        <h3>演职人员</h3>
        <swiper preview="4" class="actorswiper" myclass="actorswiper">
            <div class="swiper-slide" v-for="data in filmlist.actors" :key="data.name">
                <img :src="data.avatarAddress">
                <p>{{data.name}}</p>
            </div>
        </swiper>
        <h3>剧照</h3>
        <swiper preview="3" class="photoswiper" myclass="photoswiper">
            <div class="swiper-slide" v-for="(data,index) in filmlist.photos" :key="index">
                <img :src="data">
            </div>
        </swiper>
    </div>
</template>
<script>
import axios from 'axios'
//引入detailswiper组件
import swiper  from './Detail/DetailSwiper'
 //引入总线（触发）。index.js可省略（与App.vue中引入的都是同一个总线）
 import bus from '@/bus'
export default {
    components: {
      swiper  
    },
    //props: ['id'], //获取传过来的数据myid
    data(){
        return{
            id:'',
            filmlist:null
        }
    },

    //进入Detail页面，隐藏tabbar。
    beforeMount () {
        console.log("hidetabbar")
        bus.$emit("maizuo",false) //触发事件maizuo，并传值false，隐藏
    },
    //将获取的相应电影详情信息放到filmlist中
    mounted () {
        // console.log("获取详情信息",this.$route.params.myid)
        this.id=this.$route.params.myid
        axios({
            url:`https://m.maizuo.com/gateway?filmId=${this.id}&k=2152933`,
            headers:{
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1615895162724483673423873","bc":"110100"}',
                'X-Host': 'mall.film-ticket.film.info'
            }
        }).then(res=>{
            console.log(res.data);
            this.filmlist = res.data.data.film
        })
    },

    //退出Detail.vue,显示tabbar
    beforeDestroy () {
        console.log("showtabbar"),
        bus.$emit("maizuo",true)//触发事件maizuo，并传值true（显示）
    }
}
</script>
<style lang="scss" scoped>
.poster{
    width: 100%;
    height: 240px;
}
</style>