Web组件设计模式

Question

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

就像我有一个重复的项目列表和所有项目一样，我必须打开一个选项选择器菜单(可重用)。当选择一个选项时，我也想得到一个回调。您可以考虑居住在#app元素下的公共模式或Popover。

以某种方式，我使用PubSub模式实现了这一点，但不认为使用它是个好主意。如果有人对此有更好的想法，请提出建议。

Answer 1

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

• 有道具和活动
• 带事件总线
• 中央集权国家

道具和活动

借助道具 (可以从父组件到子组件获取数据)和发射 (从子组件到父组件引发事件)，父子组件之间的通信可能非常简单。您可以看到一个示例实现这里。

​

​

事件总线

非父母子女沟通可以由中心事件总线处理，您可以用它将事件发送到任何其他组件，还可以侦听任何组件引发的事件。举一个例子：

var bus = new Vue()

A组分法

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

在组件B的创建钩子中

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

中央集权国家

然而，为了防止通信逻辑变得难以管理，可以使用中央状态管理，它可以跟踪状态，所有组件都可以访问和更新状态。这里可以以非常原始的方式找到状态管理的简单实现。在社区中更受欢迎的是vuex，它是一个受Elm启发的状态管理库，实际上在功能上与剩馀非常相似。您可以看到这个这里的示例实现。

​

​

Answer 2

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