文章目录
0.事件总线复习1.显隐逻辑2.Detail.vue和它要控制的tabbar.vue不是父子关系3.使用中央事件总线来控制4.效果0.事件总线复习
-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消失
-12-09 vue移动端卖座电影项目(九) 使用事件总线EvenetBus控制选项卡tabbar的显隐(进入入详情页时隐藏)
如果觉得《-12-09 vue移动端卖座电影项目(九) 使用事件总线EvenetBus控制选项卡tabbar的显》对你有帮助，请点赞、收藏，并留下你的观点哦！
