在 vue ant 设计步骤中包含一个独立的组件答案

【问题标题】：Including a standalone component in vue ant design steps在 vue ant 设计步骤中包含一个独立的组件
【发布时间】：2021-08-21 19:59:58
【问题描述】：

我想使用任何设计步骤组件，我想知道如何包含来自https://www.antdv.com/components/steps/ 的独立组件

<template>
  <div>
    <a-steps :current="current">
      <a-step v-for="item in steps" :key="item.title" :title="item.title" />
    </a-steps>
    <div class="steps-content">
      {{ steps[current].content }}
    </div>
    <div class="steps-action">
      <a-button v-if="current < steps.length - 1" type="primary" @click="next">
        Next
      </a-button>
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        @click="$message.success('Processing complete!')"
      >
        Done
      </a-button>
      <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
        Previous
      </a-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 0,
      steps: [
        {
          title: 'First',
          content: 'First-content',
        },
        {
          title: 'Second',
          content: 'Second-content',
        },
        {
          title: 'Last',
          content: 'Last-content',
        },
      ],
    };
  },
  methods: {
    next() {
      this.current++;
    },
    prev() {
      this.current--;
    },
  },
};
</script>
<style scoped>
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 24px;
}
</style>

这是分步分配内容的代码

steps: [
        {
          title: 'First',
          content: 'First-content',
        },
        {
          title: 'Second',
          content: 'Second-content',
        },
        {
          title: 'Last',
          content: 'Last-content',
        },
      ],

如何在此处添加独立的component.vue

content: 'First-content',

【问题讨论】：

标签： vue.js vuejs2 antd ant-design-vue

【解决方案1】：

将content 从字符串更改为组件定义：

import FirstContent from '@/components/FirstContent.vue'
import SecondContent from '@/components/SecondContent.vue'
import LastContent from '@/components/LastContent.vue'

export default {
  data() {
    return {
      steps: [
        {
          title: 'First',
          content: FirstContent,
        },
        {
          title: 'Second',
          content: SecondContent,
        },
        {
          title: 'Last',
          content: LastContent,
        },
      ],
    }
  },
}

在您的模板中，将字符串插值替换为<component>：

<component :is="steps[current].content" />

demo

【讨论】：