<div class="slider-group" ref="sliderGroup">
<slot>
</slot>
</div>
该数据来源先是发送ajax请求获取数据再渲染dom
在mounted中调用
// console.log(this.$refs.sliderGroup.children)
this.children = this.$refs.sliderGroup.children
今天在调试的时候，发现console.log(this.$refs.sliderGroup.children)能取到该dom集合
但在
this.children = this.$refs.sliderGroup.children
赋值的时候， this.children始终取不到
一开始，以为 是 类数组对象的问题 然后各种类数组转数组的方法，尝试失败，一度怀疑人生
console.log的坑 虽然能打印出来，但是dom并没有渲染完毕
解决
mounted() {
// setTimeout(() => {
// this._setSliderWidth()
// this._initDots()
// this._initSlider()
// if (this.autoPlay) {
// this._play()
// }
// }, 20)
let length = this.$refs.sliderGroup.children.length
const fecthChil = () => {
window.setTimeout(() => {
length = this.$refs.sliderGroup.children.length
// console.log('.....', length)
if (length <= 0) fecthChil()
// const chi = Array.from(this.$refs.sliderGroup.children)
// console.log('233c', chi)
this._setSliderWidth()
this._initDots()
this._initSlider()
if (this.autoPlay) {
this._play()
}
}, 300)
}
fecthChil()
写这篇文章，谨以此记住这个坑
善用debugger
参考：
https://forum.vuejs.org/t/solved-this-refs-key-returns-undefined-when-it-really-is/1226/2
