前言：查看下面代码，在任意编辑器中直接复制粘贴运行即可

 

　　1：非动态组件（全局注册2个组件，借用v-if指令和三元表达式）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>toggle切换-非动态组件方式</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <child-one v-if="type === 'child-one'"></child-one>
            <child-two v-if="type === 'child-two'"></child-two>
            <button @click="handleClick">call me</button>
        </div>
        
        <script>
            
            Vue.component('child-one', {
                template: '<div>child-one</div>'
            })
            
            Vue.component('child-two', {
                template: '<div>child-two</div>'
            })
            
            var vm = new Vue({
                el: '#root',
                data: {
                    type: 'child-one'
                },
                methods: {
                    handleClick: function() {
                        this.type = this.type === 'child-one'?'child-two':'child-one'
                    }
                }
            })
        </script>
    </body>
</html>

 

 

　　2：动态组件（使用vue自带component标签，它表示一个动态组件，配合is属性绑定type，动态组件会根据is里数据的的变化，自动加载不同的组件）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>toggle切换-动态组件方式</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <component :is="type"></component>
            <button @click="handleClick">call me</button>
        </div>
        
        <script>
            
            Vue.component('child-one', {
                template: '<div>child-one</div>'
            })
            
            Vue.component('child-two', {
                template: '<div>child-two</div>'
            })
            
            var vm = new Vue({
                el: '#root',
                data: {
                    type: 'child-one'
                },
                methods: {
                    handleClick: function() {
                        this.type = this.type === 'child-one'?'child-two':'child-one'
                    }
                }
            })
        </script>
    </body>
</html>  

　　3：使用once指令（不要过度使用）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>once指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <child-one v-if="type === 'child-one'"></child-one>
            <child-two v-if="type === 'child-two'"></child-two>
            <button @click="handleClick">call me</button>
        </div>
        
        <script>
            
            Vue.component('child-one', {
                template: '<div v-once>child-one</div>'
            })
            
            Vue.component('child-two', {
                template: '<div v-once>child-two</div>'
            })
            
            var vm = new Vue({
                el: '#root',
                data: {
                    type: 'child-one'
                },
                methods: {
                    handleClick: function() {
                        this.type = this.type === 'child-one'?'child-two':'child-one'
                    }
                }
            })
        </script>
    </body>
</html>

　　　注：once优点——每次切换vue底层都是先销毁，然后在创建一个组件，这样是有一定性能消耗的，

　　　　　 　　　　　　once指令切换组件时不会销毁在重新创建组件，而是在第一次切换时把组件存入内存，之后就直接从内存里拿出来使用

　　　　once缺点——建议不要过度使用这个指令。除非当你需要渲染大量静态内容时，

　　　　　　　　　　 极少数的情况下它会给你带来便利，除非你发现渲染因此变得很慢，否则它是没有必要的，再加上后期会带来很多困惑，

　　　　　　　　　　 例如，一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多时间去找出模板为什么无法正确更新

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点