如何将href参数从父vue组件传递到子组件

Question

晚上好！我尝试在Vue中创建一个页面，将其解析为组件，并使用json呈现内容。这似乎没有什么复杂的，但有一个问题。但是为什么href参数放错地方了呢？请告诉我，我已经好几个小时没能解开这个谜了。

索引.vue

<template>
<section>
<Hero
v-for="(hero, index) in heroes"
:title="hero.title"
:description="hero.description"
:more="hero.more"
:href="hero.href"
:key="index"
/>
</section>
</template>

英雄.vue

<template>
<div>
<h2>{{ title }}</h2>
<p>{{ description }}</p>
<a :href="href">{{ more }}</a>
</div>
</template>
<script>

结果

<section>
<div href="/create">
<h2>Create and share your photo stories.</h2>
<p>
Photosnap is a platform for photographers and visual storytellers. We make
it easy to share photos, tell stories and connect with others.
</p>
<a>Get an Invite </a>
</div>
...
</section>

Answer 1

您可能忘记在Hero组件中将href定义为道具。

确保您已在英雄组件中添加href作为道具。

props: {
href: {
type: String,
required: true
}
}