Vue --- :is

1.1 基本示例

<div id="app">
　　<!-- template slot transition -->
　　<input type="radio" v-model="radio" value="home">home
　　<input type="radio" v-model="radio" value="list">list
　　<component :is="radio"></component>
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
　　// 组件切换的时候，会销毁
　　// 如果不想这样，希望把这两个组件缓存下来
　　// 只需要加个<keep-alive></keep-alive>
　　// <keep-alive> 可以配合activated 生命钩子使用
　　let home = {
　　　　template: '<div>home</div>',
　　　　mounted () {
　　　　　　alert('home-挂载')
　　　　},
　　　　beforeDestory () {
　　　　　　alert('home-销毁')
　　　　}
　　};
　　let list = {
　　　　template: '<div>list</div>',
　　　　mounted () {
　　　　　　alert('list-挂载')
　　　　},
　　　　beforeDestory () {
　　　　　　alert('list-销毁')
　　　　}
　　};
　　let vm = new Vue({
　　　　el: '#app',
　　　　data: {
　　　　　　radio: 'home'
　　　　},
　　　　components: {
　　　　　　home,
　　　　　　list
　　　　}
　　})
</script>

想在hasShop这个组件的内部点击某个按钮的时候，显示另外一个组件，替换hasShop组件，不用路由的切换，只是在相同

的位置显示另外一个组件。

这叫动态组件。

 

1.2 让多个组件使用同一个挂载点，并动态切换，这就是动态组件。

示例二：

<div id="app">
　　<button @click="change">切换页面</button>
</div>