未渲染的组件

Question

**我想知道为什么不渲染组件。虽然控制台没有显示任何典型错误。

https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Form.vue**

<template>
  <form>
    <KeepAlive>
      <component :is="currentStep" />
    </KeepAlive>
  </form>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["currentStep"],
  methods: {},
};
</script>

Answer 1

因为你在

currentStep

还没有通过

Form

到

App.vue

请修复以下问题，它将起作用：

• 从

  currentStep

  中删除

  methods

  App.vue

• 添加

  computed

  currentStep

  到

  App.vue

  ：

...
  computed: {
    currentStep() {
      return this.steps[this.stepIndex]
    }
  }
...

• 在

  currentStep

  中添加道具

  Form

  到

  App.vue

  ：

...
<Form
  ...
  :current-step="currentStep"
/>
...

您还应该考虑 vue 3 或 sfc 的新语法

避免使用

provide

你的代码崩溃切换到

props

Answer 2

您应该在

currentStep

组件中将

<Form />

作为道具传递，而不是使用计算属性动态传递组件名称的方法。

computed: {
    currentStep() {
      return this.steps[this.stepIndex];
    },
  }

现场演示：

codesandbox