2

所以我有一个评论框组件，它使用递归在嵌套的父子层次结构中列出用户评论（评论）。

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

布局效果很好，没有问题，但是当我尝试从子级向父级发出事件时会出现问题。

它在父组件中工作，我可以成功地为直系子级获取事件......

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

问题出在我单击子组件时，因为它是重复出现的组件，人们会期望它的行为方式相同，但事实并非如此。该事件不会与父组件产生共鸣。

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

4

1 回答 1

2

您应该将 $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"补充。

于 2020-04-20T08:22:44.920 回答