在这里跟大家分享一下如何实现动态组件的切换,举个例子,就比如组件库中的Steps步骤条,我们可能会去实现一个步骤显示一个页面这样的一个功能。
首先我们要了解component组件,他是vue内置的一个组件,提供了一个is属性来动态的渲染组件
<!-- 通过is属性动态切换组件 -->
<div class="steps-content">
<compoment :is="pro[current]"></compoment>
<div>
这里的pro是我自定义的一个数组,current则是Steps步骤条组件绑定的页码
下面直接通过代码来演示一下如何使用,这里我使用的是ant-design-vue组件库
<template>
<div>
<a-card>
//步骤条组件
<a-steps :current="current" labelPlacement="vertical">
<a-step
v-for="item in steps"
:key="item.title"
:title="item.title"
></a-step>
</a-steps>
</a-card>
<!-- 通过is属性动态切换组件 -->
<div class="steps-content">
<!--可以通过keep-alive组件缓存,来保留切换时的数据-->
<keep-alive>
<compoment :is="pro[current]"></compoment>
</keep-alive>
<a-card>
<div>
<a-button v-if="current > 0" @click="prev">
上一步
</a-button>
<a-button
v-if="current == steps.length - 1"
type="primary"
>
完成
</a-button>
<a-button
v-if="current < steps.length - 1"
type="primary"
@click="next"
>
下一步
</a-button>
</div>
</a-card>
</div>
</div>
</template>
<script>
// 这里是导入大家要显示的组件
import Pro1 from '';
import Pro2 from '';
import Pro3 from '';
import Pro4 from '';
export default {
data() {
return {
direction: 'horizontal',
current: 0,
// 自定义is的属性绑定的数据
// 一定要注意顺序和页面相对应
pro: [
'Pro1',
'Pro2',
'Pro3',
'Pro4',
],
// 每一步的名称
steps: [
{
title: '第一步',
},
{
title: '第二步',
},
{
title: '第三步',
},
{
title: '第四步',
}
],
};
},
methods: {
// 下一步
next() {
this.current++;
},
// 上一步
prev() {
this.current--;
},
},
//注册组件
components: {
Pro1,
Pro2,
Pro3,
Pro4,
},
};
</script>
参考