本文实例讲述了vue 动态组件用法。分享给大家供大家参考，具体如下：
通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is=”组件名” 中的组件名去自动匹配组件，如果匹配不到则不显示。
改变挂载的组件，只需要修改is指令的值即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 动态组件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click='toShow'>点击显示子组件</button>
<component v-bind:is="which_to_show"></component>
</div><script>
// 创建根实例
new Vue({
el: '#app',
data:{
which_to_show:'first'
},
methods:{
toShow:function(){
var arr = ["first","second","third"];
var index = arr.indexOf(this.which_to_show);
if(index<2){
this.which_to_show = arr[index+1];
}else{
this.which_to_show = arr[0];
}
}
},
components:{
first:{
template:'<div>这是子组件1<div>'
},
second:{
template:'<div>这是子组件2<div>'
},
third:{
template:'<div>这是子组件3<div>'
},
}
})
</script>
</body>
</html>
#keep-alive
动态切换掉的组件（非当前显示的组件）是被移除掉了，如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 动态组件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click='toShow'>点击显示子组件</button>
<!----或者<component v-bind:is="which_to_show" keep-alive></component>也行----->
<keep-alive>
<component v-bind:is="which_to_show" ></component>
</keep-alive>
</div><script>
// 创建根实例
new Vue({
el: '#app',
data:{
which_to_show:'first'
},
methods:{
toShow:function(){
var arr = ["first","second","third"];
var index = arr.indexOf(this.which_to_show);
if(index<2){
this.which_to_show = arr[index+1];
