Call a Method — methodCaller Example

好，同学们，我们现在来看一个非常实用的小模式：，父组件怎么去调用子组件里的方法，。想象一下，你家里有一个智能音箱，音箱自己当然有播放和暂停的功能，但按钮却装在墙上的遥控器上——遥控器就是父组件，音箱就是子组件，遥控器得能告诉音箱“开始播放”或者“暂停”。 在我们这个例子里，父组件的模板上放了一个 `c-video-player` 子组件，还有两个按钮：一个写着“播放”，一个写着“暂停”。当你点击“播放”按钮时，父组件的 JavaScript 代码会做一件事：先用 `this.template.querySelector('c-video-player')` 找到那个子组件元素。这就好比遥控器朝音箱发射红外信号，准确锁定目标。拿到引用之后，直接调用 `.play()` —— 这个 `play` 可不是普通的方法，它在子组件里被 `@api` 装饰器标记成了公共方法，专门开放给外面用的。同理，点击“暂停”按钮，就调用 `.pause()`。 这里要强调一点：真实的视频播放器组件通常自己就带一套控制条，根本不用把按钮拆到外面。但我们故意把按钮放在父组件里，纯粹是为了教学，让你看清，从组件外部调用子方法，的这套机制。`this.template.querySelector` 就是标准路线，记住它，以后你想让一个组件去指挥另一个组件做事，就用这个套路。好，这个小技巧你掌握了吗？