时间戳

首页 > 解决方案 > Vue.js 动态组件不会改变

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>

当我将active属性从 0 更改为 1 时，动态组件会发生变化并触发过渡。但是，切换到最后一个组件不会 - 它具有与之前相同的元素类型。组件的 props 不同并且被正确渲染，但是转换没有意识到发生了变化并且不会触发。

有什么想法可以解决这个问题 - 或者在过渡中组合模块的不同方法？

标签： javascriptvue.jsvuejs2vue-componentvue-transitions

解决方案

由于组件被重用，没有新的实例可以换入，并且不会触发转换，因为实例/模板被重用了。这是默认行为。但是您可以通过使用 unique 来改变它key：

<component 
    :is="options[active].type" 
    v-bind="options[active].props"
    :key="active"
/>

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

这个问题经常出现在具有使用相同组件的多个路由的路由器的上下文中，然后答案是也使用 a key。

推荐阅读