尝试在父组件之前将 ref 数据传递给组件的 prop答案

【问题标题】：Try to pass ref data to prop of component before parent component尝试在父组件之前将 ref 数据传递给组件的 prop
【发布时间】：2021-04-09 10:07:24
【问题描述】：

您好，我有点和轮播组件：

<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 组件放在轮播组件之后，则效果很好。

在 Dots 组件中我有：

export default {
  name: 'Dots',
  props: ['carousel']
}

当我尝试调用console.log(this.carousel) 时，我变得不明确。但我需要获取 Carousel 的组件数据。我该怎么做？

沙盒测试：https://codesandbox.io/s/flamboyant-monad-5bhjz?file=/src/components/Test.vue

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

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

【讨论】：