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