動態組件（component）的使用場景

動態組件component標簽是vue的一個內置組件，通過動態地設置is屬性，渲染出對應的組件

使用方法：

1、components/MyText.vue：

<template>
  <div>
    文本組件
  </div>
</template>

components/MyImage.vue：

<template>
  <div>
    圖片組件
  </div>
</template>

components/MyVideo.vue：

<template>
  <div>
    媒體組件
  </div>
</template>

2、App.vue：

<template>
  <div id="app">
    <div v-for="(item,index) in list" :key="index">
      <component :is='item.componentType'></component>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { componentType: 'MyVideo' },
        { componentType: 'MyImage' },
        { componentType: 'MyText' },
        { componentType: 'MyImage' },
        { componentType: 'MyText' }
      ]
    }
  },
  components: {
    MyText: () =>
      import(/* webpackChunkName: 'MyText' */ '@/components/MyText'),
    MyImage: () =>
      import(/* webpackChunkName: 'MyImage' */ '@/components/MyImage'),
    MyVideo: () =>
      import(/* webpackChunkName: 'MyVideo' */ '@/components/MyVideo')
  }
}
</script>

　　1、組件可以根據list中定義的順序來渲染

　　2、使用動態組件時，組件的引入最好使用異步組件的方式引入