<div id='root'> <child-one v-if='type==="child-one"'></child-one> <child-two v-if='type==="child-two"'></child-two> <button @click='handleBtnClick'>Button</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:{ handleBtnClick:function(){ this.type = (this.type === 'child-one' ? 'child-two' : 'child-one') } } }) </script>
<div id='root'> <component :is='type'></component> <button @click='handleBtnClick'>Button</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:{ handleBtnClick:function(){ this.type = (this.type === 'child-one' ? 'child-two' : 'child-one') } } }) </script>
<div id='root'> <child-one v-if='type==="child-one"'></child-one> <child-two v-if='type==="child-two"'></child-two> <button @click='handleBtnClick'>Button</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:{ handleBtnClick:function(){ this.type = (this.type === 'child-one' ? 'child-two' : 'child-one') } } }) </script>