在子组件scroll.vue中的methods选项中定义方法refresh(),如下所示:
//当已经存在berre-scroll实例的时候,DOM发生变化时,要对better-scroll实例重新更新
refresh() {
this.scroll && this.scroll.refresh()
}
然后在父组件music-list.vue中的template调用子组件scroll
<scroll ref="list" @scroll="scroll" :data="songs" :probeType="probeType" :listenScroll="listenScroll" class="list">
接着在父组件music-list.vue中的methods中定义方法handlePlaylist(),在里面调用子组件的方法refresh()
this.$refs.list.$el.refresh()
然后报错:大致意思是说function()不是一个函数,但是明明在子组件中已经定义了
TypeError: this.$refs.list.$el.refresh is not a function
at VueComponent.handlePlaylist (music-list.vue?f694:81)
at VueComponent.mounted (mixin.js?98c1:14)
at callHook (vue.esm.js?efeb:2921)
at insert (vue.esm.js?efeb:4158)
at Object.invoker [as insert] (vue.esm.js?efeb:2023)
at invokeInsertHook (vue.esm.js?efeb:5960)
at VueComponent.patch [as __patch__] (vue.esm.js?efeb:6179)
at VueComponent.Vue._update (vue.esm.js?efeb:2670)
at VueComponent.updateComponent (vue.esm.js?efeb:2788)
at Watcher.get (vue.esm.js?efeb:3142)
分析:通过this.$refs.list.$el是拿到子组件的DOM对象,因此不能调用javascript里面定义的方法
解决方法:通过this.$refs.list是拿到子组件对象,拿到这个对象之后就可以调用子组件的方法了
this.$refs.list.refresh()
其实对于this.$refs.list.$el和this.$refs.list的区别也不是很明白,希望有高人指点