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

Question

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

index.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>

Hero.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 定义为 prop。

确保您已将 href 添加为 Hero 组件中的 prop。


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

  }

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

How to pass href parameter from parent vue component to child component?

html

javascript

css

vue.js

vue-component