其他分享
首页 > 其他分享> > vue 动态添加组件

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


}

标签:vue,component,stroke,添加,black,组件,100,true,fill
来源: https://www.cnblogs.com/kbbnice/p/15596794.html