Javascript 如何在Vue中将重复组件事件获取到父级

因此，我有一个Commentbox组件，它使用递归在嵌套的父子层次结构中列出用户注释（Comment）

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

然后在子组件本身中，我们有如下代码结构：

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

是父布局吗
//是子-执行父子检查布局等。。。

布局很好，没有问题，但当我尝试将事件从子级发送到父级时，问题就出现了

它在父组件中工作，因此我可以成功地为直接子组件获取事件

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

问题在于，当我单击子组件时，由于它是一个重复出现的组件，人们可能会认为它的行为方式相同，但事实并非如此。该事件不会与父组件产生共鸣

---

在vue中如何处理此边缘情况？

您应该将$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”

添加。

@click=“this.$emit（'repling'，somedata）”错误，不应引用

此

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