<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>动态组件与v-once指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <component :is="type"></component> <hr> component vue自带的一个组件 <hr> <!-- <child-one v-if='type==="child-one"'></child-one> <child-two v-if='type==="child-two"'></child-two> --> <button @click='click'>改变</button> </div> <script> Vue.component('child-one',{ template: ` <div> child-one </div> ` }); Vue.component('child-two',{ template: ` <div> child-two </div> ` }) var app = new Vue({ el:'#app', data:{ type:'child-one' }, methods: { click:function(){ this.type=this.type==='child-one'?'child-two':'child-one' } }, }) </script> </body> </html>