时间戳

首页 > 解决方案 > 通过插槽将带有单击处理程序的按钮传递给递归子组件

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>

递归的子组件（“nested-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>

因此，当单击“加号”按钮时，我希望通过当前迭代的 var“el”从传递的插槽中的按钮发出 click 事件，但在插槽中使用迭代中使用的“el”var在嵌套可拖动组件无法访问。Vue 告诉我们在尝试发射时没有“el”引用。（抛出此错误：https ://pastebin.com/8bNwMcDr ）

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

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

标签： vue.jsvuejs2vue-component

解决方案

您不需要从模板中传递您的事件，因为无论如何您都可以使用您的方法。这应该可以帮助你。

推荐阅读