道具值不传递给子组件，不知道为什么答案

【问题标题】：Prop value doesn't pass to child component, can't figure out why道具值不传递给子组件，不知道为什么
【发布时间】：2020-04-13 06:18:18
【问题描述】：

在我的父组件中，我这样称呼我的子组件“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>

在我的子组件中，“步骤”是空的。我不明白为什么会这样。有什么想法吗？

【问题讨论】：

控制台有什么说法吗？你有 vue 调试器浏览器工具吗？ DotsNavigation 中的... 是什么？
你怎么知道它是空的？您的代码似乎正确
没有控制台错误。 steps 是空的，我在 Vue chrome 工具中看到是的。我添加了我用...隐藏的其余代码
您的 DotsNavigation 组件有多个根组件。你应该包装 v-for div
它对我来说很好，也许上传你的整个代码库。

标签： vue.js vue-props

【解决方案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>

【讨论】：

谢谢，不是这样
但是无论如何应该只有一个“模板”元素，所以你似乎有多个错误
@drake035 我更改了代码。试试这个新的。它现在必须工作。
@drake035 我看到了你的新帖子。尝试将key 添加到具有v-for 的div 中