课程章节介绍
让我们来聊聊如何在Salesforce的Lightning Web Components (LWC) 中定义和使用公共方法。首先，我们需要理解什么是公共方法。简单来说，公共方法就是可以被其他组件调用的方法。在LWC中，我们可以使用`@api`装饰器来标记一个方法为公共的。
假设我们有一个组件，它包含一个数据表格和一个学生图库。我们希望当用户选择一个学生时，这两个视图都能同步更新。为了实现这一点，我们需要在两个子组件中定义公共方法。
首先，在`StudentTiles`组件中，我们定义一个名为`setSelectedStudent`的公共方法。这个方法会接收一个`StudentID`参数，并更新选中的学生。这样，当用户选择一个学生时，图库中的边框会相应地更新。
```javascript
@api
setSelectedStudent(studentId) {
// 更新选中的学生ID
this.selectedStudentId = studentId;
// 这里可以添加更新边框的逻辑
}
```
接下来，在`DataTable`组件中，我们定义一个名为`setSelectedRecord`的公共方法。这个方法会接收一个`RecordID`参数，并找到对应的表格行，然后高亮显示它。
```javascript
@api
setSelectedRecord(recordId) {
const tableRows = this.template.querySelectorAll('tr');
tableRows.forEach(row => {
if (row.getAttribute('data-pk') === recordId) {
row.classList.add('selected'); // 假设我们有一个CSS类来高亮显示
} else {
row.classList.remove('selected');
}
});
}
```
最后，在父组件中，我们可以调用这两个公共方法来同步更新视图。例如，当用户选择一个学生时，我们可以这样调用：
```javascript
updateSelectedStudent(studentId) {
const grid = this.template.querySelector('c-data-grid-table');
const gallery = this.template.querySelector('c-student-tiles');
if (gallery) {
gallery.setSelectedStudent(studentId);
}
if (grid) {
grid.setSelectedRecord(studentId);
}
}
```
这样，无论用户是在图库还是表格中选择学生，两个视图都会同步更新，保持一致性。希望这个解释对你有帮助！如果有任何问题，随时问我。