Vue动态组件 ＜component＞

Vue中提供了来挂载不同组件，使用 is 选择要展示的组件

案例

<template>
  <div>
      <component :is="cmpName">component> <br/>
      <button @click="changeCmp('cmpone')">第一个组件button>
      <button @click="changeCmp('cmptwo')">第二个组件button>
      <button @click="changeCmp('cmpthree')">第三个组件button>
  div>
template>
<script>
// 导入子组件
import cmpone from './cmpone'
import cmptwo from './cmptwo '
import cmpthree from './cmpthree '
export default {
  // 注册组件
  components: {
    cmpone,
    cmptwo,
    cmpthree 
  },
  methods: {
    changeCmp(cmpName) {
      this.cmpName = cmpName
    }
  },
  data(){
    return {
      cmpName: 'cmpone' //默认显示第一个组件
    }
  }
}
script>

cmpone.vue

<template>
  <div>这是子组件1div>
template>

cmptow.vue

<template>
  <div>这是子组件2div>
template>

cmpthree.vue

<template>
  <div>这是子组件3div>
template>