同页面监听多个组件的变化

问题描述： 暂无数据要在每个列表可视区域内居中，‘暂无数据’我写成了一个组件，然后就在组件里写了一串代码，监听浏览器变化，但是我发现后面的监听事件会覆盖前面的

原因：
经简单测试后发现，同一个路由页面只能注册一次浏览器窗口监听事件，第二次注册的会覆盖第一次注册
下边代码即可测试

最后的解决方案：
我只在父页面写个监听，用watch监听传值的变化，响应改变

 <div class="dataPage" :style="{width: dataWidth + 'px'}">
           暂无数据
 </div>

 data(){
	return{
                dataWidth: '',
                screenWidth: document.body.clientWidth, // 设置默认值
	}
}

  mounted() {
            this.winResize()
    },

  //监听窗口变化
        winResize() {
            this.dataWidth = document.body.clientWidth - 180
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth   
                    that.screenWidth = window.screenWidth
                })()
            }
        }

watch:{
    screenWidth (val) {
        this.screenWidth = val
        if(this.screenWidth <= 500){
            this.dataWidth = this.dataWidth
        }else{
        this.dataWidth = this.screenWidth - 180
        }
    }    
},