<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>动态组件和v-once指令</h3> <!-- vue自带动态组件标签 --> <!-- is绑定一个数据，根据is的变化加载不同的组件 --> <component :is=‘type‘></component> <button @click="handleClick">change</button> </div> </body> <script type="text/javascript"> // v-once指令，当组件没有v-once指令时，切换组件的时候会频繁的创建组件和销毁组件 // 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 Vue.component(‘child-one‘, { template: `<div>child-one</div>` }) Vue.component(‘child-two‘, { template: `<div>child-two</div>` }) let vm = new Vue({ el: ‘#app‘, data: { type: ‘child-one‘ }, methods: { handleClick () { this.type = this.type == ‘child-one‘ ? ‘child-two‘ : ‘child-one‘ } } }) </script> </html>
原文：https://www.cnblogs.com/JunLan/p/12426268.html