前言：查看下面代码，在任意编辑器中直接复制粘贴运行即可
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 或漏看了它在模板中，他们可能会花很多时间去找出模板为什么无法正确更新