lwc:on — Child Component Implementation

今天我们要聊的是子组件如何跟父组件沟通，尤其是在两个不同生命周期点触发自定义事件。这是一种很干净的亲子通信模式，咱们一点点来理解。 首先，子组件一连接到DOM，也就是它的connectedCallback被调用那一刻，它会立马派发一个自定义事件。这个事件里带着它的初始数据，比如姓名、年龄，说不定还有一句问候语。你可以想象，孩子刚出门见到家长，就主动说：“你好，我叫小张，今年10岁。”这就是第一次沟通。 然后，过一会儿，用户可能在界面上点了个按钮，比如说一个闪电按钮。这时候，子组件会再派发另一个自定义事件，这次传的就是更新后的数据：姓名可能变成了“LWC”，年龄变成了“8”。就像孩子长大了一点，改了名字又过生日，跑去告诉家长：“我改名叫LWC啦，现在我8岁了。” 在这两个事件里，数据都是怎么传的呢？用的是CustomEvent构造函数，里面有个detail属性，专门用来装你要传递的数据负载。就像个小包裹，里面塞满了孩子要告诉家长的东西。 那父组件怎么接收呢？很简单，父组件的模板里用lwc:on指令来监听。就像家长竖起耳朵，孩子一喊就听到，然后马上更新自己的状态——比如在DOM上显示新的名字和年龄。 整个流程就是：孩子调度事件，家长用lwc:on处理。这么做既实现了父子组件之间的实时、反应式通信，又牢牢遵守了单向数据流原则——数据还是从父亲往下流，孩子只是通过事件请求家长更新，这很干净、很清晰。记住这个模式，后面做复杂交互会非常顺手。