Question

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

假设我有一个 component1 （我们称之为 ItemView ），它会显示项目列表中的项目信息， component2 （作为 EditDialog ），显示编辑项目信息的模式。我有三种方法，但我不确定在可读性，可维护性，可扩展性（等）方面哪种方法最好。

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

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

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

Answer 1

好吧，我会说那个最适合你的人，看起来更可靠。

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

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

在表演方面，我会让一些人比我更多地进行实验。希望它有所帮助。

组件内的组件，或父组件下的两个组件？

1 个答案: