Vue.js - 이벤트로 요소를 복제하는 방법?

Question

사용자가 슬롯으로 요소를 전송할 수있는 Vue.js 플러그인이 있습니다. 특정 상황에서 그 중 일부를 복제해야합니다. 물론 사용자는 이러한 요소에 이벤트를 추가 할 수 있습니다. 예 :

<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> 

모든 Vue/JS 이벤트로이 슬롯 요소를 복제하는 방법은 무엇입니까? 그리고 마지막으로, 예를 들어, HTML 렌더링 한 :

당신이 컨텍스트의 처음과 마지막 부분에 대해 별도의 슬롯을 사용하고 사용할 수 있습니다 무엇

<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

.

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>