动态组件写法<component v-bind:is="currentComponent"></component>，其中由is特性来决定显示哪一个组件，其中currentComponent是要显示的组件的名字。
如果动态组件用<keep-alive></keep-alive>标签包裹，那么是活的组件就会被缓存起来，不用每次都创建实例。
一个简单的小案例，用vue-cli搭建的项目结构，只写了两个组件，TestOne和TestTwo，在Test页面中加以调用。
分为歌曲组件和戏剧组件，通过点击按钮来显示要展现的组件。其中歌曲组件中通过点击歌名来显示对应的歌词。
TestOne.vue代码：
<template>
<div class="test">
<ul class="list">
<li v-for="(item,index) of song"
:key="index"
@click="changeCurrent(item,index)"
:class="{currentClass:number==index}">{{item.sname}}</li>
</ul>
<div class="shuxian"></div>
<!--如果要显示的内容带标签，就要用v-html指令，而不能再用{{}}形式
不然标签会被当成字符串
-->
<div class="content" v-if="show">
<div>
<h1 class="tittle">{{currentContent.sname}}</h1>
<div v-html="currentContent.scontent"></div>
</div>
</div>
<strong v-else>请选择你喜欢的歌曲</strong>
</div>
</template>
<script>
export default{
name:"TestOne",
data(){
return {
song:[{"sname":"纸短情长",
"scontent":`我真的好想你<br/>
在每一个雨季<br/>
你选择遗忘的<br/>
是我最不舍的纸短情长啊<br/>
道不尽太多涟漪<br/>
我的故事都是关于你呀<br/>
怎么会爱上了他<br/>
并决定跟他回家<br/>
放弃了我的所有我的一切无所谓<br/>
纸短情长啊<br/>
诉不完当时年少<br/>
我的故事还是关于你呀`},
{"sname":"追光者",
"scontent":`我可以跟在你身后<br/>
像影子追着光梦游<br/>
我可以等在这路口<br/>
不管你会不会经过<br/>
每当我为你抬起头<br/>
连眼泪都觉得自由<br/>
有的爱像阳光倾落<br/>
边拥有边失去着`},
{"sname":"不想长大",
"scontent":`我不想我不想不想长大<br/>
长大后世界就没童话<br/>
我不想我不想不想长大<br/>
我宁愿永远都笨又傻<br/>
我不想我不想不想长大`}
],
currentContent:"",
show:false,
number:null
}
},
methods:{
changeCurrent(arg,index){
this.currentContent=arg;
this.show=true;
this.number=index;
}
}
}
</script>
<style>
*{margin:0;padding:0}
/*因为内部元素浮动了，所以.test元素高度不会被撑开，可以直接设置高度解决*/
/*但是这样就不能高度随着内容的增加而变高了*/
/*使用一个非常简单的布局方法来解决，flex布局*/
.test{
width:60%;
margin:10px auto;
margin-top:0;
border:1px solid #999;
padding:20px;
display:flex;
justify-content:center
}
.list{
width:80px;
margin:5px 4px 5px 5%;
list-style: none;
/*float:left;*/
}
.songname{
width:80px;
height:30px;
line-height:30px;
}
.list li:hover{
background-color:#ddd;
}
.shuxian{
width:1px;
height:90px;
border-left:1px solid #999
}
.content{
width:50%;
/*float:left*/
}
.tittle{
margin:5px;
font-size:20px
}
.currentClass{
background-color:#bbb;
}
</style>TestTwo.vue代码：
<template>
<div class="test">
好好加油，好好努力奋斗，
</div>
</template>
<script>
export default{
name:"TestTwo"
}
</script>
<style>
</style>Test.vue代码：
<template>
<div class="main">
<div class="button">
<button v-for="(item,index) of list"
:key="index"
@click="change(index)">{{item}}</button>
</div>
<!--<test-one></test-one>-->
<component :is="currentComponent"></component>
</div>
</template>
<script>
import TestOne from './TestOne'
import TestTwo from './TestTwo'
export default{
name:"Test",
components:{
TestOne,
TestTwo
},
data(){
return {
list:["歌曲","戏剧"],
currentComponent:"TestOne"
}
},
methods:{
change(index){
if(index==0)
this.currentComponent="TestOne"
if(index==1)
this.currentComponent="TestTwo"
}
}
}
</script>
<style>
.button button{
margin-right:10px
}
</style>