Vue.js – 如何使用事件克隆元素？

Question

I have a Vue.js plugin where user can transmit they elements as slot. I have to clone some of them (in specific situations). Of course, users can add events to these elements. For example:

<component>
    <div class="slot-item" @click="myMethod(1)"></div>
    <div class="slot-item" @click="myMethod(2)"></div>
    <div class="slot-item" @click="myMethod(3)"></div>
</component>

How to clone this slot elements with all Vue/JS events? And finally have rendered HTML, for example:

<div class="my-component">
    <!-- It's the last item cloned -->
    <div class="slot-item cloned-slot-item" @click="myMethod(3)"></div>

    <!-- These are the original user elements -->
    <div class="slot-item" @click="myMethod(1)"></div>
    <div class="slot-item" @click="myMethod(2)"></div>
    <div class="slot-item" @click="myMethod(3)"></div>

    <!-- It's the first item cloned --> 
    <div class="slot-item cloned-slot-item" @click="myMethod(1)"></div>
</div>

Answer 1

What you can use is using a separate slots for the first and last parts of the context.

This can be used as follows:

 Vue.component('example-component', { template: '#example-component', }); new Vue({ el: '#demo', template: '#example-app', methods: { log(m, classTest) { console.log(m, classTest); }, }, });

 <script src="https://unpkg.com/vue@latest/dist/vue.js"></script> <script type="text/x-template" id="example-component"> <div> <slot name="last" className="clone"></slot> <slot name="first"></slot> <slot></slot> <slot name="last"></slot> <slot name="first" className="clone"></slot> </div> </script> <script type="text/x-template" id="example-app"> <example-component> <template slot="first" slot-scope="props"> <div @click="log('first: ', props.className)" :class="props.className"> first </div> </template> <div @click="log('middle1')"> middle1 </div> <div @click="log('middle2')"> middle2 </div> <template slot="last" slot-scope="props"> <div @click="log('last: ', props.className)" :class="props.className"> last </div> </template> </example-component> </script> <div id="demo"> </div>