vue.js多个组件之间进行切换,可以有多种方式,以下列举几种作为范例:
通过事件进行切换
声明两个组件
<template id="login">
<h3>登录组件</h3>
</template>
<template id="register">
<h3>注册组件</h3>
</template>
使用@click
事件进行切换
<button class="btn btn-success" @click="flag=true">登录</button>
<button class="btn btn-info col-lg-offset-2" @click="flag=false">注册</button>
<login v-if="flag"></login>
<register v-if="!flag"></register>
通过component
标签指定当前组件
<component :is="comName"></component>
组件切换时加上动画效果
使用transition
标签将组件包裹起来,实现组件切换时的动画效果
<transition mode="out-in">
<component :is="comName"></component>
</transition>