## 动态组件 ``` <div id="app"> //component标签是vue自带的 <component :is="show"></component> <!--<child-one v-if="show === 'child-one'"></child-one>--> <!--<child-two v-if="show === 'child-two'"></child-two>--> <input type="button" @click="handleClick" value="change"> </div> <script> Vue.component('child-one', { template: ` <div v-once>child-one</div> //使用了v-once,vue就不会去销毁组件了,而是保存在内存当中,这样做可以提高性能 `, }); Vue.component('child-two', { template: ` <div v-once>child-two</div> `, }); new Vue({ el: '#app', data: { show: 'child-one' }, methods: { handleClick: function () { this.show = this.show === 'child-one' ? 'child-two' : 'child-one' } } }) </script> ```