6. Vue 动态组件

Vue 动态组件

<div id="app">
  <button @click="component='com_1'">组件1</button>
  <button @click="component='com_2'">组件2</button>
  <button @click="component='com_3'">组件3</button>
  <component :is="component"></component>	
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

let com_1 = Vue.component('com-1', {
  name: 'com_1',
  template:`
  	<div>这是组件1</div>
  `
})
let com_2 = Vue.component('com-2', {
  name: 'com_2',
  template:`
  	<div>这是组件2</div>
  `
})
let com_3 = Vue.component('com-3', {
  name: 'com_3',
  template:`
  	<div>这是组件3</div>
  `
})
app = new Vue({
  el: '#app',
  data: {
    component: 'com_1'
  },
  components: {
    com_1, com_2, com_3	
  }
})