课程章节介绍
让我们一步一步地来理解如何在Salesforce Lightning Web Components (LWC) 中实现组件之间的通信。我们将通过一个具体的例子来讲解，这个例子中，`StudentBrowser`组件需要将`StudentID`传递给`StudentDetail`组件。
### 1. 导入必要的模块
首先，我们需要从`c/pubSub`模块导入`FireEvent`函数，以及从`lightning/navigation`模块导入`CurrentPageReference`。这些模块将帮助我们实现组件之间的通信。
```javascript
import { FireEvent } from 'c/pubSub';
import { CurrentPageReference } from 'lightning/navigation';
```
### 2. 在`StudentBrowser`组件中设置页面引用
在`StudentBrowser`组件中，我们使用`@wire`装饰器来获取当前页面的引用，并将其存储在`pageRef`属性中。
```javascript
export default class StudentBrowser extends LightningElement {
@wire(CurrentPageReference) pageRef;
handleNotify(event) {
const studentID = event.detail.studentID;
FireEvent(this.pageRef, 'StudentChange', { studentID });
}
}
```
### 3. 触发事件
当`StudentBrowser`组件中的`filterChange`事件被触发时，我们从事件中捕获`StudentID`，然后使用`FireEvent`函数发布一个名为`StudentChange`的事件，并将`StudentID`作为参数传递。
### 4. 在`StudentDetail`组件中注册监听器
在`StudentDetail`组件中，我们需要从`c/pubSub`模块导入`registerListener`函数，并在组件连接到DOM时注册一个监听器。
```javascript
import { registerListener } from 'c/pubSub';
import { CurrentPageReference } from 'lightning/navigation';
export default class StudentDetail extends LightningElement {
studentID;
@wire(CurrentPageReference) pageRef;
connectedCallback() {
registerListener('StudentChange', this.handleStudentChange, this);
}
handleStudentChange(event) {
this.studentID = event.studentID;
}
}
```
### 5. 处理事件
在`StudentDetail`组件中，我们定义了一个`handleStudentChange`函数来处理`StudentChange`事件。当事件被触发时，这个函数会将传递过来的`StudentID`保存到组件的`studentID`属性中。
### 总结
通过以上步骤，我们实现了`StudentBrowser`组件和`StudentDetail`组件之间的通信。`StudentBrowser`组件发布了一个包含`StudentID`的事件，而`StudentDetail`组件则监听这个事件，并在事件触发时更新自己的状态。
这种发布-订阅模式（Pub-Sub）是LWC中实现组件间通信的一种常见方式，特别适用于那些没有直接父子关系的组件之间的通信。希望这个解释能帮助你更好地理解这个过程！