Error in mounted hook: "TypeError: Cannot set property 'bottom' of undefined"

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

<scroll ref="list" @scroll="scroll" :data="songs" :probeType="probeType" :listenScroll="listenScroll" class="list">

在父组件music-list.vue的methods中的某个方法中设置子组件的根元素的bottom值

this.$refs.list.style.bottom = bottom

然后再浏览器中就报如下错误：大致意思是说不能设置属性bottom，因为它没有定义；报错的地方是在music-list.vue文件中的方法handlePlaylist()中的79行发生错误，也就是this.$refs.list.style.bottom = bottom有错

 vue.esm.js?efeb:1741 TypeError: Cannot set property 'bottom' of undefined    at VueComponent.handlePlaylist (music-list.vue?f694:79)    at VueComponent.activated (mixin.js?98c1:18)    at callHook (vue.esm.js?efeb:2921)    at activateChildComponent (vue.esm.js?efeb:2894)    at activateChildComponent (vue.esm.js?efeb:2892)    at activateChildComponent (vue.esm.js?efeb:2892)    at Object.insert (vue.esm.js?efeb:4169)    at invokeInsertHook (vue.esm.js?efeb:5960)    at Vue.patch [as __patch__] (vue.esm.js?efeb:6179)    at Vue._update (vue.esm.js?efeb:2660)logError @ vue.esm.js?efeb:1741globalHandleError @ vue.esm.js?efeb:1732handleError @ vue.esm.js?efeb:1721callHook @ vue.esm.js?efeb:2923activateChildComponent @ vue.esm.js?efeb:2894activateChildComponent @ vue.esm.js?efeb:2892activateChildComponent @ vue.esm.js?efeb:2892insert @ vue.esm.js?efeb:4169invokeInsertHook @ vue.esm.js?efeb:5960patch @ vue.esm.js?efeb:6179Vue._update @ vue.esm.js?efeb:2660updateComponent @ vue.esm.js?efeb:2788get @ vue.esm.js?efeb:3142Watcher @ vue.esm.js?efeb:3131mountComponent @ vue.esm.js?efeb:2795Vue.$mount @ vue.esm.js?efeb:8540Vue.$mount @ vue.esm.js?efeb:10939Vue._init @ vue.esm.js?efeb:4640Vue @ vue.esm.js?efeb:4729(anonymous) @ main.js?1c90:25.c/main.js @ app.js:2923__webpack_require__ @ app.js:679fn @ app.js:890 @ app.js:2988__webpack_require__ @ app.js:679(anonymous) @ app.js:725(anonymous) @ app.js:728 

分析：根据this.$refs.list.style.bottom = bottom可以知道本意是想获取子组件的DOM根元素，然后对这个元素的css属性bottom设置一个值，但是由于this.$refs.list只是获取到组件，并不能获取到子组件里面的DOM，这就是出错的原因

解决方法：通过$el选项获取到子组件的DOM，也就是改写成：this.$refs.list.$el.style.bottom = bottom，即this.$refs.list.$el可以获取到子组件的DOM