vue 動態添加組件

關鍵： vue 的 :is 屬性

最權威的，當然是vue官方說明

這是一個示例：

這段代碼中，component 這個組件名在最后會被item.component 的具體值替代。

<template>
   <component
      :is="item.component"
      :config="item.config"
      v-for="item in list"
      :key="item.uid"
  ></component>

</template>
export default {
  data(){
    return {
      list: [
      {
        component: "v-circle",
        config: {
          x: 100,
          y: 100,
          radius: 70,
          fill: "red",
          stroke: "black",
          strokeWidth: 4,
          draggable: true,
        },
      },
      {
        component: "v-circle",
        config: {
          x: 100,
          y: 100,
          radius: 70,
          fill: "red",
          stroke: "black",
          strokeWidth: 4,
          draggable: true,
        },
      },
      {
        component: "v-rect",
        config: {
          x: 20,
          y: 20,
          width: 100,
          height: 50,
          fill: "green",
          stroke: "black",
          strokeWidth: 4,
          draggable: true,
        },
      },
    ],
    }
  }


}