问题:Web 组件设计模式

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

就像我有一个重复的项目列表和所有项目我必须打开一个选项选择器菜单(可重复使用)。 And I want to get back a callback as well when a option is selected.您可以想到位于 #app 元素下的常见 Modal 或 Popover。

不知何故,我使用 PubSub 模式实现了这一点,但不认为使用它是个好主意。请建议是否有人对此有更好的想法。

解答

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

• 带道具和活动

• 带事件总线

• 带集中状态

道具和事件

在props的帮助下,父子组件之间的通信可以非常简单,它可以从父级到子级获取数据,并且发出,它可以从子级到父级引发事件。您可以在此处查看示例实现。

事件总线

非父子通信可以由中央事件总线处理,您可以通过它向任何其他组件发送事件,也可以监听任何组件引发的事件。举个例子:

var bus = new Vue()

在组件 A 的方法中

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

在组件 B 的 created 钩子中

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

中心化状态

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