Call Methods on Child Components

好，我们来看一下父子组件之间怎么用方法进行通信。 在 Lightning Web Components 里，有时候父组件需要直接调用子组件里的某个方法，这就像是家长叫孩子去做一件事情。这时候我们就用 `@api` 这个装饰器，把它放在子组件的方法前面，这个方法就变成了公开的 API，父组件可以访问到它。 那父组件怎么找到子组件呢？它会用 `this.template.querySelector`，就像在 DOM 树里根据选择器定位到这个子组件的元素，然后拿到它的引用，接着就可以直接点出那个公开的方法，像这样：`this.childComponent.someMethod()`。 这里有一个很重要的设计思路，就是“方法向下流动，事件向上冒泡”。简单来说，父控制子用方法，子通知父用事件。这是一种非常清晰的单向数据流模式，能帮你避免代码乱成一团。 你可以在官方提供的 lwc-recipes 示例库里找到一个叫 `apiMethod` 的组件，它就是用这种方式，父组件调用了一个时钟子组件的方法，很直观。 不过要注意一点，`this.template.querySelector` 只会在组件自己的模板范围内查找，不会穿过影子 DOM 的边界。也就是说，如果子组件内部还嵌套了更深层的组件，你是访问不到的。它只在当前组件的那层模板里找。 好，这样我们就理解了怎么用 `@api` 装饰器暴露子组件方法，以及父组件怎么去调用它。这是 Lightning Web Components 组件之间通信里很常用的一种方式。