组件中的组件，还是父组件下的两个组件？

Question

我在一个项目中使用Vue.js，在如何构造组件方面遇到了一个问题。

假设我有一个component1 (我们称之为ItemView)，它显示项目列表中的项的信息，而component2 (作为EditDialog)显示一个模式来编辑项目的信息。我想到了3种方法，但我不确定哪种方法在可读性、可维护性、可伸缩性(等等)方面是最好的。

1. Component2 Component1

对于ItemView的每个实例，都会有一个EditDialog组件。

父组件

<template>
  <div>
    <item-view
      v-for="item in items"
      :key="item.id"
      :item="item"
    />
  </div>
</template>

ItemView组件

<template>
  <div>
    <!-- show item information here -->
    <edit-dialog :item="item"/>
  </div>
</template>

2. Component1和Component2在同一个父级中

ItemView会发出一个事件来编辑该项。

<template>
  <div>
    <item-view
      v-for="item in items"
      :key="item.id"
      :item="item"
      @edit="editItem(item)"
    />
    <edit-dialog ref="editDialog"/>
  </div>
</template>

<script>
import ...

export default {
  components: { ... },
  data: () => { ... },
  methods: {
    editItem(item) {
      this.$refs.editDialog.edit(item)
    }
  }
}
</script>

3.使用EventBus

这种方法与方法2相似，但不使用父组件进行组件通信，而是使用EventBus。

我不知道在这些方法中，哪一种是最好的办法，或其中任何一种方法是对的还是错的，除了上述方法之外，还有更好的方法。如果我选择的话，我倾向于第一种方法。

解决这类问题的最佳方法是什么，还是有更好的方法？

Answer 1

好吧，我会说那个最适合你的人，而且看起来更容易维护。

无论如何，我们必须记住，编辑-对话框模式是您的网页的一种叠加模式，它列出了项目视图。此时，第一个解决方案对我来说并不好，因为每个ItemView组件都会重复组件编辑对话框，这是没有意义的，因为(我猜)我们不能同时打开多个模式。

我认为第二个更合适，而且由于父组件是一种ItemWrapper / Manager，在这里我不认为处理某些事件逻辑有任何问题。对于这种涉及附近两个UI组件的特性，使用EventBus似乎有点烦躁。

在表演方面，我会让比我更有经验的人来谈论这件事。希望能帮上忙。