你的写法还是出现这个错误,如何解决
时间: 2024-01-23 11:04:00 浏览: 65
如果仍然出现错误,可能是因为组件更新时,$refs对象中的scroll-view组件还没有被渲染完成。这个问题可以通过使用Vue的watch监听$refs对象中scroll-view组件的变化,当组件渲染完成后再进行监听事件的操作。修改后的代码如下:
```javascript
watch: {
'$refs.scroll1': {
handler() {
this.$nextTick(() => {
this.$refs.scroll1.$el.addEventListener('scroll', () => {
this.$refs.scroll2.$el.scrollTop = this.$refs.scroll1.$el.scrollTop;
});
});
},
immediate: true
},
'$refs.scroll2': {
handler() {
this.$nextTick(() => {
this.$refs.scroll2.$el.addEventListener('scroll', () => {
this.$refs.scroll1.$el.scrollTop = this.$refs.scroll2.$el.scrollTop;
});
});
},
immediate: true
}
},
beforeDestroy() {
this.$refs.scroll1.$el.removeEventListener('scroll');
this.$refs.scroll2.$el.removeEventListener('scroll');
}
```
这样就可以在组件更新时监听$refs对象中scroll-view组件的变化,并在组件渲染完成后进行监听事件的操作。同时,为了避免在组件销毁前出现错误,还需要在beforeDestroy钩子函数中移除监听事件。
阅读全文