vue 中监听并设置scrollTop

问题描述：

  目前在做一个项目，父子组件以及兄弟组件中数据调用比较频繁。但是鉴于项目没那么大，就没有使用vuex。直接使用了this.$emit来给父级组件传递参数以及触发事件.
  但是，由于业务需求， 我的项目当前子组件修改数据的同时是可以将父级组件中的数据同步修改的。然后，子组件再来获取到父组件传递过来数据。就导致了子组件数据在有滚动条的情况下，更新了最新的数据到父级组件之后。子组件的数据也再次刷新，从而引起我子组件页面的滚动条位置也刷新，scrollTop 也变成 0。
  最终也找到了解决办法！

问题分析情况

1. 可能问题一
   子组件使用了element的滚动组件 el-scrollbar
2. 可能问题二（使用了window.addEventListener监听滚动事件），如下

mounted（）{
	window.addEventListener('scroll', () => {
      	this.$nextTick(() => {
      		console.log('监听元素的滚动高度')
    	})
 	}, true)
}

因为项目目前还在做，所以不能把代码都放出来。望理解！
（其中 topsH 为我自己页面 监听滚动元素的滚动高度 ）

以上就是修改之后的代码。

解决方法:

1. 将el-scrollbar 替换掉！ 改成原生代码

   style="overflow: hidden;overflow-y: scroll;"

2. 将监听事件修改为局部监听

document.getElementById('heightScoll').addEventListener('scroll', () => {
    this.$nextTick(() => {
       this.topsH = this.$refs.scrollDiv.scrollTop
    })
 }, true)

请注意！ 该监听需要在页面销毁时再次调用

destroyed() {
    document.getElementById('heightScoll').addEventListener('scroll', () => {
      this.$nextTick(() => {
        this.topsH = this.$refs.scrollDiv.scrollTop
      })
    }, true)
  }