尝试在父组件之前将引用数据传递给组件的 prop

Question

我有点和轮播组件：

<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

Answer 1

如果出于美观原因您只需要在轮播之前添加点，您可以重新排序模板（例如：https://developer.mozilla.org/fr/docs/Web/CSS/order）。

您可以将 Dot 组件放在 Carousel 之后以获取其引用，但它会在之前显示。