vue 动态添加组件

Posted 2021-11-24 柯宝宝智商感人

关键： 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,
        },
      },
    ],
    }
  }


}

A little hug, little gift. All of little something. these are our meories.