我的问题是这样子的,子组件里有elementui的跑马灯,在父组件中点击手动切换,但是跑马灯每次切换的都是上一次点击应该出现的结果,即方法调用的参数的值是上一次传过来的值,就是旧值。(下面的例子没有在项目里跑起来,写了一个大概,主要讲一下怎么解决)
子组件children.vue
<template>
<div class="block">
<el-carousel height="150px">
<el-carousel-item v-for="item in listData" :key="item.id" :name="item.name" ref:"carousel">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default{
props:{index:String},
method:{
setIndex(){
this.$refs.carousel.setActiveItem(this.index)
}
}
}
</script>
父组件:
<template>
<div class="block">
<children :index=toindex @click="tochange" ref="children"></children>
</div>
</template>
<script>
import children from ‘./children’
export default{
component:{
children
},
data:{
return {
toindex:'name1'
}
},
method:{
click(item){
this.toindex=item.name
this.$refs.children.setIndex()
}
}
}
</script>
这时候就会出现开头我说的问题,子组件的index值是父组件toindex传过来的值,但总是旧值,导致手动切换跑马灯不一致的问题。
解决方案:
把子组件的方法setIndex改成:
setIndex () {
setTimeout(() => {
this.$refs.carousel.setActiveItem(this.index);
}, 300)
},
加了一个延迟的效果,这样就解决了。
在网上查了一下,意思是props加载的比较慢,就是method先调用了,这时候参数还没改变,所以调用的方法用的参数是旧值。
还可以这么改:
setIndex () {
this.$nextTick(() => {
// dom元素更新后执行
this.$refs.remarkCarusel.setActiveItem(this.index);
})
},