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>

属性值未传递给子组件，无法找出原因

1 个答案: