<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态组件与v-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="handleBtnClick">change</button> <component :is="type"></component> </div> <script type="text/javascript"> 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() { this.type = this.type === ‘child-one‘ ? ‘child-two‘ : ‘child-one‘ } } }) </script> </body> </html>
原文：https://www.cnblogs.com/Harold-Hua/p/11755337.html