vue全局监听页面的改变

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Tomwildboar/article/details/82501065

目的：vue全局监听页面的改变，从而做出相对应的结果。

第一种：你的监听源包含了所有的你需要监听的组件

eg：你把监听事件写在了 App.vue 组件中，而你需要监听 1.vue 2.vue 3.vue 组件。你全部都在 App里面引用了。

 为了方便，我直接把代码也复制过来

<script>
  //引入导航栏子组件
  import navigationBar from "./components/public/navigationBar.vue"
  //引入底部子组建
  import bottom from "./components/public/bottom.vue"

  export default {
    data() {
      return {
           screenWidth: document.body.clientWidth,   // 页面的宽度
      };
    },
    mounted(){
        this.$refs.navigationBar.change1(this.screenWidth);   //初始化导航栏的样式     
    },
    created() {
      const that = this     
      window.onresize = () => {    
          return (() => {
              window.screenWidth = document.body.clientWidth
              that.screenWidth = window.screenWidth      
              this.$refs.navigationBar.change1(this.screenWidth); //实时监听并改变导航栏的样式
          
          })()
      }
    },
    components:{    //注册组件

      "navigation-Bar" : navigationBar,     //导航栏子组件
      "bottom-box" : bottom,                //底部子组件     
    }

  };
</script>

 

 第二种：你很多地方都需要用这个监听事件。

很遗憾，这个 window.onresize 监听事件只能写一个。

我的解决思路是。 在vuex中存放一个数据。这个数据就是页面的实时宽度。然后再需要监听的地方去对这个数据进行监听。

缺陷：无法监听到，突然的变大，变小（你直接点击了右上角的最大化）

2-1，创建vuex （这个网上很多，自己去找）