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

【问题标题】：Component within a component, or both components under a parent component?组件中的组件，还是父组件下的两个组件？
【发布时间】：2018-03-21 06:51:19
【问题描述】：

我在一个项目中使用 Vue.js，但遇到了关于如何构建组件的问题。

假设我有一个 component1（我们将其称为 ItemView）显示项目列表中项目的信息，以及 component2 （作为 EditDialog）显示用于编辑项目信息的模式。我想到了 3 种方法，但我不确定哪种方法在可读性、可维护性、可扩展性（等等）方面最好。

1. Component1 中的 Component2

对于 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在同一个Parent下

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 类似，但不是使用 parent 组件进行组件通信，而是使用 EventBus。

我不确定其中哪一种是最好的方法，或者这些方法中的任何一种是对还是错，以及除了上述方法之外还有更好的方法。如果让我选择，我倾向于第一种方法。

解决此类问题的最佳方法是什么，或者有更好的方法吗？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

好吧，我会说最适合您并且看起来更易于维护的那个。

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

我认为第二个更合适，由于父组件是一种 ItemWrapper / Manager，我认为在这里处理一些事件逻辑没有任何问题。在我看来，将 EventBus 用于涉及两个附近 UI 组件的此类功能似乎有些夸张。

在性能方面，我会让比我更有经验的人谈论它。希望对您有所帮助。

【讨论】：