vue/cli的学习九 跨组件的通信 状态控制

1:效果 首页有导航   详情页面没有导航  离开详情页面导航恢复

2:一个原则  数据声明在哪里  数据的修改的方法就在哪里

3:声明一个跨组件的bus

import  Vue from  "vue";
let  bus  = new  Vue();
export  default bus;

4:声明导航的效果切换状态和状态修改方法  当navFlag为false的 就会隐藏

  <div id="nav" v-show="navFlag">
      <router-link to="/">Home</router-link> 
      <router-link to="/cinema">影院</router-link>
      <router-link to="/info">资讯</router-link> 
      <router-link to="/mine">个人</router-link>
    </div>

export default {
  data(){
    return {
      navFlag:true
    }
  },
  created(){
    //声明了一个公共的方法 对nav的状态进行修改
    bus.$on("changeFlag",(flag)=>{
        this.navFlag = flag;
    })
  }
}

5:在需要调用的地方 引入调用

import  bus  from  "../bus";//默认就是bus下面的index  index可以省略
export default {
    created(){//加载的时候显示
        bus.$emit("changeFlag",false);
    },
    beforeDestroy(){//销毁的出来
        bus.$emit("changeFlag",true);
    },