Error in mounted hook: "TypeError: this.$refs.list.$el.refresh is not a function"
阿新 • • 發佈:2019-01-28
在子元件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的區別也不是很明白,希望有高人指點