Javascript Vue.js动态组件不'；不变

我正在构建一个基于Vue.js的SPA，在这里我想在内容的几个部分之间进行转换：

<template>
    <transition name="fade">
        <component 
            :is="options[active].type" 
            v-bind="options[active].props"
        />
    </transition>
</template>

<script>
const content = [
    {type: 'ContentHeader', props: {...}},
    {type: 'ContentModule', props: {...}},
    {type: 'ContentModule', props: {...}}
];

import ContentHeader from '...';
import ContentModule from '...';

export default {
    components: {
        ContentHeader,
        ContentModule
    },

    data: () => ({
        active: 0,
        options: content
    })
};
</script>

常量内容=[
{type:'ContentHeader'，props:{…}}，
{type:'ContentModule'，props:{…}}，
{type:'ContentModule'，props:{…}
];
从“…”导入ContentHeader；
从“…”导入ContentModule；
导出默认值{
组成部分：{
ContentHeader，
内容模块
},
数据：（）=>({
活动：0，
选项：内容
})
};

当我将

active

属性从0更改为1时，动态组件将更改并触发转换。但是，切换到最后一个组件并没有，因为它与之前的组件具有相同的元素类型。组件的道具是不同的，并且渲染正确，但是转换没有意识到已经发生了更改并且不会触发

---

有什么办法可以解决这个问题吗？或者用不同的方法在转换中组合模块吗？

因为组件是重用的，没有新的实例可以交换，转换也不会触发，因为实例/模板是重用的。这是默认行为。但您可以通过使用唯一的

键来更改：



这里，我使用
active
索引作为唯一标识符，告诉Vue为每个组件使用一个新实例

这个问题经常出现在路由器有多条路由使用同一组件的情况下，然后答案是使用
键
。
谢谢，@Dan，解决了这个问题。我以前试过一个键，但可能我使用了一个静态值。