简单来说，动态组件切换时，让其出现动画效果。（还记不记得在过渡那一节的说明，过渡适用于动态组件）
默认是进入和退出一起完成；（可能造成进入的内容出现在退出内容的下方，这个下方指y轴方面偏下的，等退出完毕后，进入的才会出现在正确的位置）；
transition-mode=”out-in”时，动画是先出后进；
transition-mode=”in-out”时，动画是先进后出（同默认情况容易出现的问题）；
示例代码：（使用自定义过渡名和animate.css文件）
<div> <button @click="toshow">点击让子组件显示</button> <component v-bind:is="which_to_show" 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第十二篇之动态组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: