Vue里面的关于组件监听的问题？

Question

我在a组件（被包裹在scroll组件里面,scroll是基于better-scroll(滚动条插件)自己组装的组件）里的图片设置了@load监听图片是否加载,通过事件总线发射到home组件（home 组件引用了scroll）

this.$bus.$emit('imageLoad')

在home组件里

 mounted() {
            this.$bus.$on('imageLoad',res=>{
                    this.$refs.scroll.scroll.refresh()
                }
            })
        }

但有时图片加载完成之后this.$refs.scroll不一定被建立起来导致报错,请问如何解决？

this.$refs.scroll&&this.$refs.scroll.scroll.refresh()

这种方式可以吗,前面的如果不存在那后面就永远不执行了，还是说
前面的在某一刻改变了，后面的会自动执行？

Answer 1

是的； 并且前面在某一刻改变了，后面也不会自动执行

原因官网写了：访问子组件实例或子元素

看到 vue 里经常报 this.$refs.xxx undefined 的错。
就是获取 dom， 可能它还未渲染完，此时去访问的话就报错了。而且 this.$refs 又不是响应式的，所以即使渲染好了，也不会触发。

解决方案：
1.

this.$nextTick(() => {
    this.$refs.scroll&&this.$refs.scroll.scroll.refresh()
})

2.加个延时器 setTimeout

3.watch 里监听数据变化, 再调用

Answer 2

前面大佬已经说得很详细了，建议使用this.$nextTick.
nextTick用法：
在下次 DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。