在Vue项目中动态添加多个不同的组件

郭宝

于 2019-08-09 10:19:38 发布

阅读量7.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/qq_35366269/article/details/98942292

Web前端专栏收录该内容

284 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文详细介绍了在Vue项目中如何实现动态加载多个不同组件的功能。通过核心组件的使用和配置，展示了如何根据需求动态插入不同的视图，提供了一种灵活的组件管理方式，并附带了实际效果的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心组件：

<template>
    <div>
      ============================77、动态添加不同组件============================
      <!--
       :is="item.type" 根据当前类型加载不同的组件
      -->
      <component v-for="(item,index) in componentData" :key="index" :is="item.type" :data="item.itemData"></component>
    </div>
</template>

<script>
  import TextLog from './TextLog'
  import LineChart from './LineChart'
    export default {
        name: "DynamicAdditionOfDifferentComponents_77",
      data(){
        return {
          currentView:'TextLog',
          componentData:[],
        }
      },
      components:{
        TextLog,
        LineChart,
      },
      created(){
        for (let i = 0; i <10 ; i