尝试在vue.js v2.6.11
中对动态组件执行转换。我参考了文档-组件之间的转换,但无法获得结果。
我已经在codesandbox中创建了一个示例,并进行了不同的尝试和错误。但下面是基本的代码片段,应该足以实现转换。
模板
<template>
<div id="app">
<button @click="toggle = !toggle">Toggle</button>
<transition class="component-fade" mode="out-in">
<component :is="currentComp" val="msg" :key="currentComp" />
</transition>
<transition class="component-fade" mode="out-in">
<div v-if="toggle">test</div>
<p v-else>Sorry, no items found.</p>
</transition>
</div>
</template>
脚本
<script>
export default {
name: "App",
data() {
return {
toggle: true
};
},
components: {
home2: {
template: `<h1>home2</h1>`,
},
"about-us2": {
template: `<h1>about2</h1>`,
},
},
computed: {
currentComp() {
return this.toggle ? "home2" : "about-us2";
},
},
};
</script>
风格
<style scoped>
.component-fade-enter-active,
.component-fade-leave-active {
transition: all 6s ease;
}
.component-fade-enter,
.component-fade-leave-to {
opacity: 0;
}
</style>
代码解释:点击切换按钮,组件将使用计算值切换,组件将使用:is
或<component>
进行更改。因此,当它更改时,我将尝试基本过渡(现在不透明度更改)。
如果我的代码中缺少了什么,请告诉我。
1条答案
按热度按时间46scxncf1#
您还没有提供
transition name
。替换
class="component-fade"
与
这里是fixed sandbox