})
}
},
third: { //第三个子组件
template: "<div>这里是子组件3</div>"
}
}
});
</script>
代码效果：
【1】第一次切换到组件2时，需要等待2秒后才能显示（因为发起ajax）；
【2】在有keep-alive的情况下，第二次或之后切换到组件2时，无需等待；但ajax内容，需要在第一次发起ajax两秒后才会显示；
【3】在无keep-alive的情况下（切换掉后没有保存在内存中），第二次切换到组件2时，依然需要等待。
【4】等待时，不影响再次切换（即等待组件2的时候，再次点击切换，可以直接切换到组件3）；
说明：
【1】只有在第一次渲染组件时，才会执行activate，且该函数只会执行一次（在第一次组件出现的时候延迟组件出现）
【2】没有keep-alive时，每次切换组件出现都是重新渲染（因为之前隐藏时执行了destroy过程），因此会执行activate方法。
⑤transition-mode过渡模式
简单来说，动态组件切换时，让其出现动画效果。（还记不记得在过渡那一节的说明，过渡适用于动态组件）
默认是进入和退出一起完成；（可能造成进入的内容出现在退出内容的下方，这个下方指y轴方面偏下的，等退出完毕后，进入的才会出现在正确的位置）；
transition-mode=”out-in”时，动画是先出后进；
transition-mode=”in-out”时，动画是先进后出（同默认情况容易出现的问题）；
示例代码：（使用自定义过渡名和animate.css文件）
<div id="app">
<button @click="toshow">点击让子组件显示</button>
<component v-bind:is="which_to_show" class="animated" transition="bounce" transition-mode="out-in"></component>
</div>
<script>
Vue.transition("bounce", {
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
var vm = new Vue({
el: '#app',
data: {
which_to_show: "first"
},
methods: {
toshow: function () { //切换组件显示
var arr = ["first", "second", "third", ""];
var index = arr.indexOf(this.which_to_show);
if (index < 3) {
this.which_to_show = arr[index + 1];
} else {
this.which_to_show = arr[0];
}
}
},
components: {
first: { //第一个子组件
template: "<div>这里是子组件1</div>"
},
second: { //第二个子组件
template: "<div>这里是子组件2，这里是ajax后的内容：{{hello}}</div>",
data: function () {
return {
hello: ""
}
}
},
third: { //第三个子组件
template: "<div>这里是子组件3</div>"
}
}
});
</script> 以上所述是小编给大家介绍的Vuejs第十二篇之动态组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
