Vue 中组件的切换

有两中心实现的方式

第一种：

通过 <component :is=" "></component>  标签来实现  :is 的值是组件的名称，用一个变量来接收。再通过事件来改变这个变量的值

代码：

[code]<template>
<div class="home">
<!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->

<span @click="toggle('login')" >登陆</span> /
<span @click="toggle('reg')">注册</span> /
<span @click="toggle('HelloWorld')">HelloWorld</span>
<component :is="comName"></component>
</div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

import login from "@/components/login.vue"
import reg from "@/components/reg.vue"
export default {
name: "home",
components: {
HelloWorld,
login,
reg
},
data(){
return{
comName:"login"
}
}
,
methods:{
toggle:function(val){
this.comName = val
}
}
};
</script>

第二种：

同过v-if 、v-eles 、v-elseif 来实现

代码：

[code]<template>
<div class="home">
<!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->

<span @click="toggle('login')" >登陆</span> /
<span @click="toggle('reg')">注册</span> /
<span @click="toggle('HelloWorld')">HelloWorld</span>
<!-- <component :is="comName"></component> -->

<login v-if="comName =='login'"></login>
<reg v-else-if="comName =='reg'"></reg>
<HelloWorld v-else></HelloWorld>
</div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

import login from "@/components/login.vue"
import reg from "@/components/reg.vue"
export default {
name: "home",
components: {
HelloWorld,
login,
reg
},
data(){
return{
comName:"login"
}
}
,
methods:{
toggle:function(val){
this.comName = val
}
}
};
</script>