vue复制slot或组件

我想实现这样的需求

有一个组件 AddTemp
点击 <button>add</button> 增加一个slot内容

组件:AddTemp

<template>
  <div class="add-temp">
    <button>add</button>
    <slot name="template></slot>
  </div>
</template>

引用组件 AddTemp 示例

<template>
  <div class="demo">
    <AddTemp>
      <div slot="template">
       ---
      </div
      //增加slot内容的位置
    </AddTemp>
  </div>
</template>

这样可以怎么实现呢

阅读 4.7k
2 个回答

直接 v-for + 子组件 实现不行吗?

https://segmentfault.com/q/10...
你可以看下我这个回答,和你的差不多,用v-for 和一个json data去处理

我理解的是 你要复制一个组件出来,不知道我理解的对不对
用vue的动态组件 来解决问题
用一个数组保存组件名称,然后通过v-for循环加载动态组件,就可以了,简单写了一点代码,编辑器写的可能有错误,大概意思能表达清楚

<Acomponent>
    <div>
        <component v-for="component in componentList" :is="component"></component>
    </div>
    <button @click="copy">增加</button>
</Acomponent>
new Vue({
    components: {
        'componentA': A,
        'componentB': B
    },
    data:{
        componentList:['componentA','componentB']
    },
    methods:{
        //点击按钮后 在componentList中 添加新的组件名称就可以了
        copy(){
            
        }
    }
})
推荐问题
宣传栏