时间戳

首页 > 解决方案 > 尝试在父组件之前将 ref 数据传递给组件的 prop

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

问题描述

您好，我有 Dots 和 Carousel 组件：

<Dots :carousel="$refs.carousel" />
<div>
  some data
</div>
<carousel
    ref="carousel"
    :per-page="4"
    :autoplay="true"
    :autoplay-timeout="3000"
    :mouse-drag="false"
>
  ....
</carousel>

当我尝试在 Dots 组件上传递给道具时，道具数据中出现未定义，为什么？我需要 Dots 组件位于 Carousel 组件之前。这个很重要。我认为，这就是为什么它不起作用的原因。如果我将 Dots 组件放在轮播组件之后，那么效果很好。

在点组件中，我有：

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

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

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

标签： javascriptvue.js

解决方案

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

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

推荐阅读