Как получить повторяющееся событие компонента для родителя в Vue - PullRequest
Новая
       22

Как получить повторяющееся событие компонента для родителя в Vue

2 голосов
/ 20 апреля 2020

Итак, у меня есть компонент Commentbox, который перечисляет комментарии пользователей (Comment) во вложенной иерархии родитель-потомок с использованием рекурсии. 

// Commentbox.vue (child)
<template>
   <comment :comments="comments"></comment-box>
</template>

давайте предположим, что данные, переданные этому дочернему компоненту, равны 

[
  { id: a, parent: c, children: [], comment: cdoisdskds ....}
  { id: b, parent: a, children: [...,...], comment: bjdskdls .... }
]

и затем в самом дочернем компоненте мы имеем структуру кода, подобную приведенной ниже: 

<template>
   <div v-for="(comment, index) in comments" :key="index" >

      <div  v-if="comment.children" @click="this.$emit('repling', somedata )" > is parent layout </div>
      <div v-else >

        //is child - do the parent-child check layout etc...
        <comment :comment.children></comment>

      </div>
   </div>
<template>

Макет прекрасно работает без проблем, но проблема возникает, когда я пытаюсь передать событие от дочернего к parent.

Он работает в родительском компоненте как таковой, и я могу успешно получить событие для непосредственных потомков ... 

<comment-box>
  <comment @replying="dostuff"></comment>
</comment-box>

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

Как можно обработать этот крайний случай в vue?

1 Ответ

2 голосов
/ 20 апреля 2020

Вы должны передать $ listeners от родителя к потомкам или переиздать даже обратно от потомков к родителю. Самый простой способ - добавить v-on="$listeners", когда вы начнете повторять компонент: 

<template>
   <div v-for="(comment, index) in comments" :key="index" >

      <div  v-if="comment.children" @click="$emit('replying', somedata)" > is parent layout </div>
      <div v-else >
        <comment v-on="$listeners" :comment.children></comment>
      </div>
   </div>
<template>

См. Дополнение v-on="$listeners".

...