我有点和轮播组件:
<Dots :carousel="$refs.carousel" />
<div>
some data
</div>
<carousel
ref="carousel"
:per-page="4"
:autoplay="true"
:autoplay-timeout="3000"
:mouse-drag="false"
>
....
</carousel>
当我尝试传递给 Dots 组件上的 prop 时,我的 prop 数据未定义,为什么?我需要将 Dots 组件放在 Carousel 组件之前。这很重要。我认为,这就是它不起作用的原因。如果我将 Dots 组件放在 carousel 组件之后,那么效果很好。
在点组件中我有:
export default {
name: 'Dots',
props: ['carousel']
}
在安装中,当我尝试调用
console.log(this.carousel)
时,我得到了未定义。但我需要获取轮播的组件数据。我怎样才能做到呢?
沙箱测试:https://codesandbox.io/s/flamboyant-monad-5bhjz?file=/src/components/Test.vue
如果出于美观原因您只需要在轮播之前添加点,您可以重新排序模板(例如:https://developer.mozilla.org/fr/docs/Web/CSS/order)。
您可以将 Dot 组件放在 Carousel 之后以获取其引用,但它会在之前显示。