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

文章目录

0.事件总线复习
1.显隐逻辑
2.Detail.vue和它要控制的tabbar.vue不是父子关系
3.使用中央事件总线来控制
4.效果

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>// 导入组件tabbarimport tabbar from "./components/tabbar"// 导入Eventbusimport 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消失

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

2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式
文章目录 1.封装选项卡 2.设置iconfont 3.nowPlaying获取数据后写样式 3.1.获取后台数据 3.2.从data对象获取电影海报,标题,评分 3.3.过滤data.actor,获 ...
2021-12-10 vue移动端卖座电影项目(十) 使用状态管理模式vuex的state控制选项卡tabbar的显隐,mutation的用法,this.$store.commit()的两个参数
文章目录 0.vuex复习 1.引入 2.在state中存showTabbar后,直接可以引用 3.在Detail.vue的两个钩子函数中设置控制showTabbar的布尔值 4.效果:实现进入详情页 ...
2022-11-17 vue移动端卖座电影项目(一) 获取后台数据
0.目标网页卖座电影 1.获取url数据位置:网络>复制>复制链接地址 2.获取电影列表数据字段获取:网络>标头>请求标头> 3.代码 views/nowPlayi ...
2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
文章目录 0.实现场景:进入详情页时,底部选项卡隐藏 1.使用中央事件总线控制tabbar的v-show的值 2.使用vuex的state控制tabbar的v-show的值 3.使用vuex的muta ...
2021-12-11 vue移动端卖座电影项目(十一) comingSoon用后台获取的数据写样式,以及用vuex的Action处理异步问题:切换FilmHeader中的两个标签时直接缓存数据
文章目录 0.vuex工作流程图复习 1.思路 2.axios获取后台数据(仿nowPlaying页即可) 3.用vuex的Action处理异步问题:切换FilmHeader中的"正在热映& ...
2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式
1.带着id传到详情页面中效果:点击任一电影,跳转进Detail.vue页面时后面自动拼接上电影的filmId http://localhost:8081/#/Detail/6112 http:// ...
2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件,使之可用于详情页Detail,实现演职员表的轮拨和剧照的轮拨
文章目录 0.实现效果 1.封装详情页的轮拨组件DetailSwiper 2.perView:显示张数设置为动态,两个轮拨图分别初始化的方法:重命名并获取当前的class名 3.最终代码和效果代码 ...
2021-11-30 vue移动端卖座电影项目(四) 当前项目代码
文章目录 0.目录和package.json依赖 1.src/assets/iconfont(文件夹) 2.src/components/tabbar.vue 3.router/index.js 4. ...
2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件目的步骤结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片目的步骤因为现在原网站已取消轮拨 ...

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

文章目录

0.事件总线复习

1.显隐逻辑

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

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

4.效果

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

最新文章

热门文章