Vue.js 通过插槽将带有单击处理程序的按钮传递给递归子组件

我有一个包含以下代码部分的页面模板：

        <nested-draggable v-bind:list="list" v-bind:selected="selected" v-bind:group="dragGroup">
            <slot>
                <v-icon v-on:click="$root.$emit('click', el)" small v-if="allowcreate" style="float: right">mdi-plus</v-icon>
            </slot>
        </nested-draggable>

mdi plus

递归的子组件（“嵌套的draggable.vue”）如下所示：

<template>
    <ul class="tree">
        <draggable
            class="dragArea"
            tag="li"

            v-for="el in list"

            v-bind:elementdata="el"
            v-bind:key="el._id"
            v-bind:list="list_empty"
            v-bind:selected="selected"
            v-bind:group="group"

            v-on:add="add"
            >
            <span v-bind:class="{'selected' : el._id === selected._id}" v-on:click="elemClicked(el)">{{ el.title }}</span>

            <slot></slot>

            <!-- render children of the current iterated element -->
            <nested-draggable
                v-bind:list="el.children" v-bind:selected="selected" v-bind:group="group">
                <!--<slot></slot>-->
            </nested-draggable>
        </draggable>
    </ul>
</template>

{{el.title}}

因此，我希望在单击“加号”按钮时，通过传递的槽中的按钮发出click事件，其中包含当前迭代的var“el”，但是在槽中，嵌套的可拖动组件的迭代中使用的“el”var无法访问。Vue告知在尝试发射时没有“el”引用。（引发此错误：）

那么，如何访问传递的插槽中的递归数据呢？传递插槽时，我必须如何定义插槽

---

我找到的唯一解决方案是将按钮/事件链接直接放入嵌套的可拖动组件（而不是插槽），但我认为要干净并编写一个很好的分离组件，这将不属于嵌套的可拖动组件，但在其父级中。

您不需要从模板传递事件，因为您可以通过任何方式进入方法。应该可以帮助您。

您不需要从模板传递事件，因为您可以以任何方式进入您的方法。应该可以帮你。

我不需要这个活动。我需要递归子组件中迭代中的迭代元素（名为“el”）。在这种情况下，您需要将

el

绑定到插槽中，以便能够在插槽中访问它。阅读更多关于您可以做的事情，如

el

绑定到插槽中，以便能够在插槽中访问它。阅读更多关于您可以做的事情，如