Передать кнопку с обработчиком щелчка через слот в рекурсивный дочерний компонент - PullRequest
Новая
       3

Передать кнопку с обработчиком щелчка через слот в рекурсивный дочерний компонент

0 голосов
/ 27 февраля 2020

У меня есть шаблон страницы со следующей частью кода: 

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

, поэтому я бы хотел, чтобы событие click от кнопки в пропущенном слоте генерировалось с переменной «el» текущей итерации при нажатии кнопки «плюс», но внутри слота - «el» var, используется в рамках итерации в компоненте nested-draggable, доступ к которому невозможен. Vue говорит о том, что при попытке излучения отсутствует ссылка на el. (Выдает эту ошибку: https://pastebin.com/8bNwMcDr)

Так как я могу получить доступ к рекурсивным данным в переданном слоте? Как мне определить мой слот при прохождении его?

Единственное решение, которое я нашел, - это поместить кнопку / ссылку на событие непосредственно во вложенный перетаскиваемый компонент (не как слот), но я думаю, что он чистый и написать хороший отдельный компонент, он не будет принадлежать вложенному перетаскиваемому компоненту, а будет его родителем.

1 Ответ

0 голосов
/ 27 февраля 2020

Вам не нужно передавать ваше событие из шаблона, потому что вы можете использовать его в любом случае. Это должно помочь вам.

...