Error in mounted hook: "TypeError: this.$refs.list.$el.refresh is not a function"

忘是亡心i 2022-05-22 01:11 958阅读 0赞

在子组件scroll.vue中的methods选项中定义方法refresh()，如下所示：

//当已经存在berre-scroll实例的时候，DOM发生变化时，要对better-scroll实例重新更新  
    refresh() {  
      this.scroll && this.scroll.refresh()  
    }

然后在父组件music-list.vue中的template调用子组件scroll

接着在父组件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的区别也不是很明白，希望有高人指点