angular – Web组件设计模式

发布时间：2020-12-17 17:02:42 所属栏目：安全来源：网络整理

导读：任何人都知道我们在Web组件设计中遇到的常见设计问题.我已经开始使用Vuejs / ReactJS和Angular 2,但我面临的最常见问题是组件之间的通信.我想与其他动态组件交谈,并将一些数据传递给它,期待数据的回报. 就像我有一个重复的项目列表和所有项目,我必须打开一个

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

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

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

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

>有道具和活动
>随着活动巴士
>以集中的状态

道具和事件

在props的帮助下,父子组件之间的通信可能非常简单,可以将数据从父级转移到子级,而emit则可以将事件从子级提升到父级.您可以看到示例实现here.

enter image description here

活动巴士

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

var bus = new Vue()

在组件A的方法中

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

在组件B中创建了钩子

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

集中的国家

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

enter image description here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!