介绍动态组件
通常来说，当用户点击按钮切换至显示不同的组件，我们可以通过使用Vue Router来实现。简单来说，就是通过加载不同的URL来加载对应的组件。但是还有一种方法，在不使用Vue Router的情况下， 也可以实现不同组件的切换，例如组件的挂载和卸载，这种方法就是使用动态组件。使用动态组件可以让你的代码更加简洁，同时也可以使用条件指令，例如v-if和v-else来搭配实现动态组件的需求。
使用动态组件
动态组件的语法
<component :is="currentComponet"/>
实例1：
我们先新建两个组件Robot1和Robot2，两个组件的代码基本相同
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
name: "Robot1",
data() {
return {
msg: "我是机器人1号"
};
}
};
</script>
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
接着想俩个组件引入根组件APP.vue来使用
<template>
<div id="app">
<Robot1 />
<Robot2 />
</div>
</template>
<script>
import Robot1 from "./components/Robot1";
import Robot2 from "./components/Robot2";
export default {
name: "App",
components: {
Robot1,
Robot2
}
};
</script>
<style>
#app {
text-align: center;
}
</style>
这样的话，两个组件都会被显示在页面上，但是我们只想挂载其中的一个组件。我们使用v-bind来绑定动态组件的属性。修改绑定的currentComponent为Robot2后，页面会挂载Robot2组件。
<template>
<div id="app">
<component :is="currentComponent" />
</div>
</template>
<script>
import Robot1 from "./components/Robot1";
import Robot2 from "./components/Robot2";
export default {
name: "App",
components: {
Robot1,
Robot2
},
data() {
return {
currentComponent: "Robot2"
};
}
};
</script>
实例2：上面的例子我们完成了动态组件的初步使用，我们还可以添加点击事件switchComponent来修改currentComponent的值，从而真正达到两个组件之间的切换状态
<template>
<div id="app">
<component :is="currentComponent"/>
<button @click="switchComponent">切换</button>
</div>
</template>
<script>
import Robot1 from "./components/Robot1";
import Robot2 from "./components/Robot2";
export default {
name: "App",
components: {
Robot1,
Robot2
},
data() {
return {
currentComponent: "Robot2"
};
},
methods: {
switchComponent() {
if (this.currentComponent === Robot1) {
this.currentComponent = Robot2;
} else {
this.currentComponent = Robot1;
}
}
}
};
</script>
使用keep-alive
Vue开发团队还提供了keep-alive特性，目的是当组件切换的时候，各自组件中的状态依然保存。例如，当你在Robot1组件的表单中输入信息的时候，你进行了切换，然后你再返回Robot1组件的时候，你输入的文字信息会被重置。
如果使用了keep-alive进行包裹，那么组件中的数据状态会被保留。
<keep-alive>
component :is="currentComponent"/>
</keep-alive>
