本文介绍了在Vue中进行组件切换的方法，特别是使用`component`元素，并探讨了如何为组件切换添加动画效果，提升用户体验。
Vue-组件4 组件切换
一、组件切换方式1—component元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
<style>
.comSty {
border: 1px solid black;
width: 255px;
padding: 10px;
}
.labelSty {
width:80px;
display: inline-block;
}
</style>
</head>
<body>
<div id="app">
<!-- 4 两个超链接，用来切换组件-->
<a href="" @click.prevent="showComId='login'">登录</a>
<a href="" @click.prevent="showComId='register'">注册</a>
<!-- 5 用component元素来显示组件，is属性为显示组件的id-->
<component :is="showComId"></component>
</div>
<!-- 1.定义两个组件模板，登录和注册-->
<!-- 1.1 登录组件模板-->
<template id="tmp-login">
<div class="comSty">
<label for="username" class="labelSty">用户名：</label><input id="username" type="text"><br>
<label for="password" class="labelSty">密码：</label><input id="password" type="password"><br>
<button>登录</button>
</div>
</template>
<!-- 1.2 注册组件模板-->
<template id="tmp-registered">
<div class="comSty">
<label for="username" class="labelSty">用户名：</label><input id="username" type="text"><br>
<label for="password" class="labelSty">密码：</label><input id="password" type="password"><br>
<label for="password" class="labelSty">确认密码：</label><input id="password" type="password"><br>
<button>注册</button>
</div>
</template>
<script>
// 2 创建组件
// 2.1 应用登录组件模板
Vue.component('login', {
template: '#tmp-login'
})
// 2.2 应用注册组件模板
Vue.component('register', {
template: '#tmp-registered'
})
var vm = new Vue({
el: '#app',
data: {
showComId: 'login' // 3 定义当前组件id
},
methods: {}
})
</script>
</body>
</html>
二、给组件添加动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
<style>
.comSty {
border: 1px solid black;
width: 255px;
padding: 10px;
}
.labelSty {
width:80px;
display: inline-block;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-avtive {
transition: all 0.8s ease;
}
</style>
</head>
<body>
<div id="app">
<!-- 4 两个超链接，用来切换组件-->
<a href="" @click.prevent="showComId='login'">登录</a>
<a href="" @click.prevent="showComId='register'">注册</a>
<!-- 5 用component元素来显示组件，is属性为显示组件的id-->
<!-- 使用transition来设置动画，mode="out-in"为先退出再进入-->
<transition mode="out-in">
<component :is="showComId"></component>
</transition>
</div>
<!-- 1.定义两个组件模板，登录和注册-->
<!-- 1.1 登录组件模板-->
<template id="tmp-login">
<div class="comSty">
<label for="username" class="labelSty">用户名：</label><input id="username" type="text"><br>
<label for="password" class="labelSty">密码：</label><input id="password" type="password"><br>
<button>登录</button>
</div>
</template>
<!-- 1.2 注册组件模板-->
<template id="tmp-registered">
<div class="comSty">
<label for="username" class="labelSty">用户名：</label><input id="username" type="text"><br>
<label for="password" class="labelSty">密码：</label><input id="password" type="password"><br>
<label for="password" class="labelSty">确认密码：</label><input id="password" type="password"><br>
<button>注册</button>
</div>
</template>
<script>
// 2 创建组件
// 2.1 应用登录组件模板
Vue.component('login', {
template: '#tmp-login'
})
// 2.2 应用注册组件模板
Vue.component('register', {
template: '#tmp-registered'
})
var vm = new Vue({
el: '#app',
data: {
showComId: 'login' // 3 定义当前组件id
},
methods: {}
})
</script>
</body>
</html>
更新时间：2019-12-21
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
