события и компоненты, ссылающиеся на себя vue.js

Question

У меня есть система комментирования, которая позволяет ветку 1 уровня.Это означает, что комментарий 1-го уровня будет выглядеть как {... content, thread: []}, где тема может содержать больше комментариев.Я думаю, что это хорошо для компонента, ссылающегося на себя, и списка со слотами.Но через некоторое время я не знаю, как подключить эту вещь.

Компонент SingleComment указан ниже

<template>
...  *content*

<b-button
    v-if="isCommentDeletable"
    @click="handleDelete"
</b-button>

<div v-for="item in item.thread" :key="item._id">
    <SingleComment class="ml-3"
        :item="item"
    />
</div>
</template>
...

    methods: {
        handleDelete () {
            this.$emit('remove')
        },
    }
... 
    components: {
        'NewComment': NewComment, 'SingleComment': this
    },
    name: 'SingleComment'
}
</script>

Классический список компонента списка получает массив элементов в виде реквизита и задается как

<div v-for="item in items" ...
    <slot
        name="listitem"
        :item="item"
    />
</div>

, и это родительский элемент, гдеЯ хочу использовать эти два компонента с модальным Parent

<AppModal

>
...
<List
    class="my-1"
    :items="comments.docs"
>

    <template v-slot:listitem="{ item }">
        <SingleComment
            :item="item"
            :remove="removeItem"
            @remove="removeItem"
        />
    </template>
</List>

Я хочу соединить эту вещь в Parent, чтобы я мог использовать один модальный для всего списка.Я связываю вещи с событиями?Или же?Любая помощь приветствуется.Я застрял.Я могу сделать несколько взломов, но я действительно не знаю, как бороться с этими компонентами.

Answer 1

Если у вас есть только один уровень вложенности, вы можете просто передать сам компонент как слот, например:

<Comment v-for="comment in comments" :key="comment.id" v-bind="comment">
  <Comment v-for="thread in comment.thread" :key="thread.id" v-bind="thread" />
</Comment>

Тогда вам придется беспокоиться только о пропуске реквизита на один уровень глубиной, так какесли бы у вас был только один список комментариев.Я создал пример этого на CodeSandbox здесь: https://codesandbox.io/embed/vue-template-mq24e.

---

Если вы хотите использовать рекурсивный подход, вам просто нужно передавать реквизиты и события;нет волшебного решения, которое обходит это.Пример обновления CodeSandbox: https://codesandbox.io/embed/vue-template-doy66.

Вы можете избежать явной передачи прослушивателя событий removeitem, если у вас будет действие removeitem в хранилище Vuex, которое вы сопоставляете с вашим компонентом.

Мое мнение здесь таково, что чем проще, тем лучше, и вам не нужна рекурсия для одного уровня вложенности.Поставьте себя на место будущего разработчика и сделайте код легким для чтения и рассуждений;этот будущий разработчик может быть даже вами, если вы не рассматривали кодовую базу в течение нескольких недель.