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,
        },
      },
    ],
    }
  }


}
posted @ 2021-11-24 09:50  柯宝宝智商感人  阅读(1183)  评论(0编辑  收藏  举报