Child 组件使用 parent 组件数据到 re-direct

Question

我目前有一个 website/app 将 "FeatureCard"（组件）显示到 "Grid" 组件上。

功能卡具有传递给 parent（网格）组件的所有基本道具，因此可以抓取数据并使用 v-for 创建尽可能多的 "featureCards"尽可能。

一切正常，工作正常。

当我想要将功能卡的标题 link 添加到 slug-route 上时，问题就出现了。

这是我的 "FeatureCard" 组件的片段 -

<div class="card-content">
        <div class="row-1">
            <!-- <h4 class="bold">{{ resourceTitle }}</h4> -->

            <router-link :to="{ name: 'FigmaFind', params: {resource_slug: this.slug} }"><h4 class="bold">{{ resourceTitle }}</h4></router-link>
            <button class="price"><h6 class="bold">{{ resourcePrice }}</h6></button>
        </div>
        <div class="row-2">
            <a :href=creatorProfile target="_blank" >
                <img  :src="creatorImage">
            </a>

            <a :href=creatorProfile target="_blank" >
                <p>By <strong>{{ creatorsName }}</strong></p>
            </a>

        </div>
        <div class="row-3">
            <a :href="downloadLink" class="btn main" target="_blank" >
                <p class="light semibold" for="info" >Download Resource</p>
            </a>
            <a :href="resourceOriginalLink" class="btn icon" target="_blank">
                <p class="material-icons light md-18">info</p>
            </a>
        </div>

    </div>

如您所见，在 "row-1" 中，我尝试包含一个 router-link，但显然它不起作用，因为它尚未收到 "this.slug" 的数据，但本质上，这就是我希望用户单击它并被重定向到 "website.com/selected-item-1"

的地方

我的问题是，在将 "slug" 数据呈现到 Grid 组件上之前，我不会将其拉入。所以，在那之前我不确定如何引用它供以后使用，我将标题引用为 "resource title" 或 links 为“：href="resourceOriginalLink"”，但不知道该怎么做它用于路由器项目。我可以只使用“：href="resourceOriginalLink"”，但我不知道如何将 route-info 传递给...

有什么想法吗？

更新

所以，我想通了。这可能是错误的方法，也可能有更简单的方法。但这是我所做的。

我将数据 "slug" 作为道具传递给了我的 child 组件 (featureCard)。然后我在我的数据中设置 slug: this.resourceSlug 。然后在我的标题部分我简单地设置 <router-link :to="{ name: 'FigmaFind', params: { resource_slug: this.slug }}"><h4 class="bold">{{ resourceTitle }}</h4></router-link>

而且，它似乎有效！！

显然，如果有更好的方法请告诉我。

Answer 1

更新

所以，我想通了。这可能是错误的方法，也可能有更简单的方法。但这是我所做的。

我将数据 "slug" 作为道具传递给了我的 child 组件 (featureCard)。然后我在我的数据中设置了 slug: this.resourceSlug 。然后在我的标题部分我简单地设置 {{ resourceTitle }}

而且，它似乎有效！！

显然，如果有更好的方法请告诉我。

Child 组件使用 parent 组件数据到 re-direct

Child component using parent component data to re-direct

vue.js

vue-router

vue-component

vuejs2