Web组件设计模式

Question

有人了解在 web 组件设计中我们面临的常见设计问题吗？我已经开始学习 Vuejs/ReactJS 和 Angular 2，但我最常遇到的问题是组件之间的通信。我想与其他动态组件交流并传递一些数据，期望得到返回的数据。

例如，我有一个重复的项目列表，所有项目都要打开一个选项选择菜单（可重用）。当选择一个选项时，我也希望得到回调。您可以将其视为常见的模态框或弹出窗口，驻留在 #app 元素下。

我通过 PubSub 模式实现了这一点，但不认为这是个好主意。如果有更好的想法，请建议一下。

- Ashvin777

---

回调函数（Callbacks）和发布-订阅模式（PubSub）是用于该模式的确切工具。请描述您为什么认为这不是一个好主意。 - OneCricketeer

https://angular.io/docs/ts/latest/cookbook/component-communication.html - eko

Answer 1

在Vue.js中，有多种模式可以用于动态组件之间的通信。

• 使用 props 和 events
• 使用事件总线
• 使用集中式状态

props 和 events

通过 props 可以将数据从父组件传递到子组件，而通过 emit 可以将事件从子组件抛出给父组件。您可以在此处看到一个示例实现：here。

事件总线

非父子组件之间的通信 可以通过一个中央事件总线来处理，您可以通过它向任何其他组件发送事件，并监听由任何组件引发的事件。以下是一个示例：

var bus = new Vue()

在组件A的方法中。

bus.$emit('id-selected', 1)

在组件B的created钩子中。

bus.$on('id-selected', function (id) {
  // ...
})

集中式状态管理

然而为了防止通信逻辑变得难以管理，可以使用集中式状态管理，它可以跟踪状态，并且可以被所有组件访问和更新。在这里你可以找到一个非常基础的状态管理实现。然而，在社区中更受欢迎的是vuex，一个受 Elm 启发的状态管理库，其功能与redux非常相似。您可以在这里看到这种状态管理的一个示例实现。

- Saurabh

---

情况是这样的 - 我有一个 #app 元素，在其中我有多个以父子格式排列的组件。因此，在父子树的第5层中，我有一些重复的组件，并且在每个组件上，我想添加菜单弹出按钮。点击它，应该打开一个带有选项的菜单。菜单组件位于距离 #app 元素仅有 1 层的位置。我想将选项列表从第5层组件传达到第1层菜单组件，并希望监听单击事件返回到第5层组件。请问您能否帮忙解决这个问题？ - Ashvin777

@Ashvin777 你可以使用eventBus，在需要调用其他组件方法的任何地方使用它，如果这些组件之间有一些共享对象，你可以使用vuex。希望能帮到你，如有更多细节或任何特定查询，请随时回复。 - Saurabh

Answer 2

在Angular 2中，使用服务来共享数据并在组件之间通信。对于选项选择器，请在应用程序的共享文件夹中创建一个公共菜单组件。将选项数组作为@Input()传递以动态显示菜单选项，点击后，您可以发出ActionId或任何其他唯一的操作，然后使用发布/订阅，在任何组件中执行任何操作。

- Ali Shahzad