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

Question

我想使用任何设计步骤组件，我想知道如何从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',

Answer 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" />

演示