如下所示:
<swiper
:style="{ height: listHeight + 'px' }"
:current="tabIndex"
:duration="1000"
@change="onswiperchange"
@transition="onswiperscroll"
@animationfinish="animationfinish"
>
<swiper-item class="swiper-item" v-for="(page, index1) in tabList" :key="index1">
//子组件
<news-item class="page-item" :lmid="page.id" ref="page"></news-item>
</swiper-item>
</swiper>
onReady() {
console.log(this.$refs, this.$refs.page);
}
打印结果:
原因:
关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs
也不是响应式的,因此你不应该试图用它在模板中做数据绑定。
解决:
为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)
。这样回调函数将在 DOM 更新完成后被调用
解决1:官网:异步更新队列
解决2:
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
一般在mounted生命周期中,html已经渲染出,可获取this.$refs
setTimeout(() => {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})
},0);
updated :处于数据更新的后
updated() {
console.log("1:",this.$refs.page)
this.pageList = this.$refs.page;
}
延时方法不推荐使用,存在不确定性。