vue中的组件切换使用v-if和v-else进行组件的切换使用component切换组件

103 阅读 0 评论 68 点赞

我是靠谱客的博主怕黑背包，这篇文章主要介绍vue中的组件切换使用v-if和v-else进行组件的切换使用component切换组件，现在分享给大家，希望可以做个参考。

2019年8月18日

使用v-if和v-else进行组件的切换

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app"><a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register></div>
<script>
Vue.component('login',{
template:'<h3>登录组件</h3>'
})
Vue.component('register',{
template:'<h3>注册组件</h3>'
})
var vm=new Vue({
el:'#app',
data:{
flag:false
},
methods:{}
});
</script>

在需要控制的标签上添加v-if和v-else属性
通过点击按钮将flag置为true或者false，实现组件的切换

使用component切换组件

组件名是字符串

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 Vue.component('login',{
template:'<h3>登录组件</h3>'
})
Vue.component('register',{
template:'<h3>注册组件</h3>'
})
var vm=new Vue({
el:'#app',
data:{
comName:'login' //当前component中的 :is绑定的组件的名称
},
methods:{}
});

页面中的代码
Vue提供了component,来展示对应名称的组件
component是一个占位符,:is属性,可以用来指定要展示的组件的名称

复制代码

1
2
3
4
5
6
<div id="app">
<a href="" @click.prevent="comName='login'">登录组件</a>
<a href="" @click.prevent="comName='register'">注册组件</a>
<component :is="comName"></component>
</div>

相当于点击按钮之后，将comName这个变量的值修改，从而实现组件的切换

在component外用transtion包裹起来，再设置style就可以为切换添加动画

复制代码

1
2
3
4
<transition mode="out-in">
<component :is="comName"></component>
</transition>

transition的 mode属性是，当要切换出的组件完全切换出去的时候才允许进入的组件进入

style属性

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.v-enter,
.v-leave-to{
opacity:0;
transform:translateX(150px)
}
.v-enter-active,
.v-leave-activ{
transition:all 0.5s ease;
}
</style>