动态组件

切换两个不同组件

• 方法1
  使用 v-if 和按钮点击切换

<div id="app">
    <child-one v-if='type === "child-one"'></child-one>
    <child-two v-if='type === "child-two"'></child-two>
    <button @click='change'>change</button>
</div>
// js
Vue.component('child-one',{
    template:`
        <div>child-one</div>
    `
});
Vue.component('child-two',{
    template:`
        <div>child-two</div>
    `
});
var vm = new Vue({
    el:'#app',
    data:{
        type:'child-one'
    },
    methods:{
        change:function(){
            this.type = (this.type == 'child-one' ? 'child-two' : 'child-one')
        }
    }
});

• 方法2
  使用动态组件 :is 和按钮切换

<div id="app">
    <component :is='type'></component>
    <button @click='change'>change</button>
</div>

// js 与方法1 相同

根据:is 后面的属性值，显示相应的组件。

最后，因为频繁切换两个组件，vue每次都是要先销毁一个，在创建另一个。这里建议加上 v-once 指令。

Vue.component('child-one',{
    template:`
        <div v-once>child-one</div>
    `
});

v-once 官方 API 解释：
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。