Vue.js+Element：复制组件

最新推荐文章于 2024-08-23 14:18:03 发布

♛琉璃

最新推荐文章于 2024-08-23 14:18:03 发布

阅读量887

点赞数

分类专栏： Vue.js 文章标签： vue element

本文链接：https://blog.csdn.net/qq_44419617/article/details/101374970

版权

Vue.js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

代码

<template>
  <div>
    <div>
      <component v-for="component in componentList" :key="component" :is="component"/>
    </div>
    <el-button size="mini" @click="delect(index)">删除</el-button>
    <el-button size="mini" @click="copy">增加</el-button>
  </div>
</template>
<script>
import test4 from '../test/test4' // 引入所需组件
export default {
  components: {
    test4
  },
  data() {
    return {
      componentList: ['test4']
    }
  },
  methods: {
    copy() {
      this.componentList.push(test4)
    },
    delect(index) {
      this.componentList.splice(index, 1)
    }
  }
}
</script>