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

【问题标题】：Vue.js – how to clone element with events?Vue.js – 如何使用事件克隆元素？
【发布时间】：2018-05-16 11:53:28
【问题描述】：

我有一个 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>

【问题讨论】：

什么意思 "...clone this slot elements..." ?
我编辑了这个问题。我希望现在更清楚了。
component 是 vue 中的 component 元素，还是组件的占位符？
@Ferrybig 这是我正在创建的 vue 组件。当然，它有不同的名称，但我不想详细说明。

标签： javascript vue.js vue-component dom-events

【解决方案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>

【讨论】：