17、组件间数据共享与多源数据异步加载

组件间数据共享与多源数据异步加载

1. 组件提取与数据传递基础

在前端开发中，我们提取的组件通常使用 article 作为最外层的 HTML 元素。根据 HTML 规范， article 元素代表文档、页面、应用程序或站点中一个完整或独立的组成部分，原则上可独立分发或复用。合理使用这个标签，能为我们提取组件提供很好的线索。

提取组件后，如何将数据传递给它们是一个关键问题。我们已经获取了客户详细信息，但由于视图只是静态 HTML，还未对这些数据进行处理。接下来，我们将探讨如何在基于组件的设计中实现数据传递。

1.1 组件间数据共享

每个组件负责显示客户数据的不同部分。为避免每个组件都向服务器请求相同的数据，我们希望组件负责显示和后续的数据修改，而数据由其他地方提供。由于我们已经在 CustomerDetailsComponent 中获取了数据，现在需要一种方法将其传递给其他组件。

以 CustomerInfoComponent 为例，它用于显示客户的姓名、用户名、加入日期和电子邮件地址。我们在 CustomerDetailsComponent 中已经有这些信息，下面介绍如何将其传递给 CustomerInfoComponent 。

1.1.1 数据绑定设置

我们可以使用 bind- 前缀来绑定组件的属性。这里，我们要将 CustomerInfoComponent