Web组件设计模式

Question

任何人都知道我们在Web组件设计中遇到的常见设计问题。我已经开始使用Vuejs / ReactJS和Angular 2，但我面临的最常见问题是组件之间的通信。我想与其他动态组件交谈，并将一些数据传递给它，期待数据作为回报。

就像我有一个重复的项目列表和所有项目，我必须打开一个选项选择菜单（可重复使用）。我想在选择一个选项时也回复一个回调。您可以想到驻留在#app元素下的常见Modal或Popover。

不知何故，我使用PubSub模式实现了这一点，但不认为使用它是个好主意。如果有人对此有任何更好的了解，请建议。

Answer 1

在vuejs中，有多种模式可以在动态组件之间进行通信。

• 使用道具和活动
• 使用活动巴士
• 以集中状态

道具和事件

在props的帮助下，父子组件之间的通信非常简单，可以将数据从父级转移到子级，emit可以将事件从子级引发到父级。您可以看到示例实现here。

事件总线

Non-parent child communication可由中央事件总线处理，您可以使用该事件总线将事件发送到任何其他组件，并监听任何组件引发的事件。举个例子：

var bus = new Vue()

在组件A的方法

中

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

在组件B中创建了钩子

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

集中状态

然而，为了防止通信逻辑变得难以管理，可以使用中央状态管理，其可以跟踪状态，可以由所有组件访问和更新。 Here您可以非常原始的方式找到一个简单的状态管理实现。社区中更受欢迎的是vuex一个受榆树影响的状态管理库，它实际上与功能上的redux非常相似。您可以看到此here的示例实现。

Answer 2

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