4-8动态组件与v-once指令 :is · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态组件与v-once指令 :is</title> <script src="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> </div> <script> Vue.component('child-one', { template: '<div>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> ~~~