动态组件（component）的使用场景

2021-08-12 20:33:14 阅读：207 来源： 互联网

标签：场景 MyVideo component MyText MyImage vue components 组件

动态组件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、使用动态组件时，组件的引入最好使用异步组件的方式引入

标签：场景,MyVideo,component,MyText,MyImage,vue,components,组件
来源： https://www.cnblogs.com/wuqilang/p/15134504.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

动态组件（component）的使用场景