子组件使用父组件数据重定向答案

【问题标题】：Child component using parent component data to re-direct子组件使用父组件数据重定向
【发布时间】：2019-05-04 17:54:16
【问题描述】：

我目前有一个网站/应用程序在“网格”组件上显示“FeatureCard”（组件）。

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

这一切都很好并且工作正常。

当我希望功能卡的标题链接到其在 slug-route 上时，问题就出现了。

这是我的“FeatureCard”组件的 sn-p -

<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”中，我尝试包含一个路由器链接，但显然它不起作用，因为它尚未收到“this.slug”的数据，但本质上，这就是我希望用户点击它，并被重定向到“website.com/selected-item-1”

我的问题是，在将“slug”数据渲染到 Grid 组件之前，我不会将其拉入。因此，在此之前我不确定如何引用它以供以后使用，我将标题称为“资源标题”或将链接称为“：href =“resourceOriginalLink””，但不知道如何为路由器项目执行此操作。我可以只使用 ":href="resourceOriginalLink"" 但我不知道如何通过路由信息...

有什么想法吗？

更新

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

我将数据“slug”作为道具传递给我的子组件（featureCard）。然后我在我的数据中设置slug: this.resourceSlug。然后在我的标题部分中，我只需设置<router-link :to="{ name: 'FigmaFind', params: { resource_slug: this.slug }}"><h4 class="bold">{{ resourceTitle }}</h4></router-link>

而且，它似乎正在工作！

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

【问题讨论】：

如果您没有在孩子中操纵this.slug，则不需要data 项目。只需使用道具。
哦，好吧，我不需要将它设置为数据项，我可以使用“this.slug”并直接从我的道具中使用它？
@KJParker 正确。当道具已经可用时，无需弄乱您的数据。
另外，您应该在更新中创建一个答案，以便问题得到解答。

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

更新

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

我将数据“slug”作为道具传递给我的子组件（featureCard）。然后我在我的数据中设置了 slug: this.resourceSlug。然后在我的标题部分中，我只需设置 {{ resourceTitle }}

而且，它似乎正在工作！

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

【讨论】：