Vue.js 动态组件不改变
Vue.js dynamic components don't change
我正在构建一个基于 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 不同并且呈现正确,但转换没有意识到发生了变化并且不会触发。
关于如何解决这个问题的任何想法 - 或者对于在转换中组合模块的不同方法?
由于组件被重用,因此没有新的实例可以换入并且不会触发转换,因为 instance/template 被重用。这是默认行为。但是您可以使用唯一的 key
:
来更改它
<component
:is="options[active].type"
v-bind="options[active].props"
:key="active"
/>
这里我使用 active
索引作为唯一标识符来告诉 Vue 为每个组件使用一个新实例。
这个问题经常出现在路由器有多个路由使用相同组件的情况下,那么答案就是也使用 key
。
我正在构建一个基于 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 不同并且呈现正确,但转换没有意识到发生了变化并且不会触发。
关于如何解决这个问题的任何想法 - 或者对于在转换中组合模块的不同方法?
由于组件被重用,因此没有新的实例可以换入并且不会触发转换,因为 instance/template 被重用。这是默认行为。但是您可以使用唯一的 key
:
<component
:is="options[active].type"
v-bind="options[active].props"
:key="active"
/>
这里我使用 active
索引作为唯一标识符来告诉 Vue 为每个组件使用一个新实例。
这个问题经常出现在路由器有多个路由使用相同组件的情况下,那么答案就是也使用 key
。