vue组件切换—component标签实现多个组件的切换和组件动画的实现

71 阅读 0 评论 47 点赞

我是靠谱客的博主健壮鼠标，最近开发中收集的这篇文章主要介绍vue组件切换—component标签实现多个组件的切换和组件动画的实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

要点：

1. component是一个占位符，：is，用来指定展示组件的名称，通过绑定变量来实现切换

2.只需将<component>组件定义的标签用<transition>包裹起来即可

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(200px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<a href="#" @click.prevent="flag='login'">登录</a>
<a href="#" @click.prevent="flag='register'">注册</a>
<a href="#" @click.prevent="flag='delete'">注销</a>
<transition mode="out-in">
<!--mode属性设置生产者消费者模式-->
<component :is="flag"></component>
<!--component是一个占位符，：is，用来指定展示组件的名称，通过绑定变量来实现切换-->
</transition>
</div>
<!--通过v-if或者v-else切换显示注册和登录，但是只能在两种状态下切换-->
<script>
Vue.component('login',{
template:'<h3>登录页面</h3>'
});
Vue.component('register',{
template:'<h3>注册页面</h3>'
});
Vue.component('delete',{
template:'<h3>注销页面</h3>'
});
var vm = new Vue({
el:'#app',
data:{
flag:'login'
//通过flag切换component绑定的事件
},
method:{}
});
</script>
</body>
</html>

添加动画之前效果：