vue.js - 道具值不传递给子组件，不知道为什么

Question

在我的父组件中，我这样称呼我的子组件“DotsNavigation”：

<template>
  <div>
    <dots-navigation :steps="steps" />
  </div>
</template>

<script>
import DotsNavigation from "@/components/dashboard/dots-navigation"

export default {
  components: {
    DotsNavigation
  },
  data: function() {
    return {
      steps: [
        {
          title: "title1",
          path: "path1"
        },
        {
          title: "title2",
          path: "path2"
        },
        ...
      ]
    }
  }
}
</script>

我的子组件“DotsNavigation”看起来像这样：

<template>
  <nav>
  <div v-for="(step, key) in steps">
    <router-link
      :key="`dot-${key}`"
      :to="`/dashboard/${step.path}`"
    >
      <div>
        {{ key + 1 }}
      </div>
      <div>
        {{ step.title }}
      </div>
    </router-link>
    <div
      :key="`line-${key}`"
      v-if="key !== steps.length - 1"
    ></div>
  </div>
  </nav>
</template>

<script>
export default {
  props: {
    steps: {
      type: Array,
      default: () => []
    }
  }
}
</script>

在我的孩子的评论中，“步骤”是空的。我不明白为什么会这样。任何想法？

Answer 1

尽量不要template在template. 在您的DotsNavigation内部替换template中div，看看它是否有效：

<template>
  <nav>
    <div v-for="(step, key) in steps" :key="`div-${key}`">
        <router-link
      :key="`dot-${key}`"
      :to="`/dashboard/${step.path}`"
    >
      <div>
        {{ key + 1 }}
      </div>
      <div>
        {{ step.title }}
      </div>
    </router-link>
    <div
      :key="`line-${key}`"
      v-if="key !== steps.length - 1"
    ></div>
    </div>
  </nav>
</template>