Web组件设计模式

Question

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

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

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

Answer 1

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

• 有道具和活动
• 随着活动巴士
• 随着国家集中

道具和事件

父子组件之间的通信可以是非常琐碎的帮助的道具,它可以从父取数据给孩子,并可发射,它可以引发事件从孩子父母.您可以在此处查看示例实现.

活动巴士

非父子通信可以通过中央事件总线处理,您可以使用该总线将事件发送到任何其他组件,并且还可以监听任何组件引发的事件.举个例子:

var bus = new Vue()

在组件A的方法中

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

在组件B中创建了钩子

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

集中的国家

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