slotchange Event Pattern — button-group Example

同学们，今天我们来看一个声明性合成中特别经典的例子——按钮组模式。 想象一下，你有一个父组件，比如一个闪电按钮组，它里面有一个插槽，用来容纳子按钮。这些子按钮通过插槽投射进来，父组件需要知道它们的位置，然后自动给第一个按钮、最后一个按钮、中间的按钮，或者唯一一个按钮，加上不同的 CSS 类，从而让它们的样式变得统一又美观。 具体是怎么做到的呢？ 父组件会监听插槽的 slotchange 事件。一旦插槽内容发生变化，事件处理函数就会被调用。这时，你要记住一个关键点：事件的目标（event.target）就是那个 slot 元素。在这个 slot 元素上调用 assignedElements 方法，才能拿到实际投射到插槽里的那些真实的 DOM 元素。注意，不是从事件对象上直接取，而是调用 slot.assignedElements()。 拿到这些子元素之后，父组件就会遍历它们，判断每一个是第一个、最后一个、中间的唯一一个，还是中间的某个按钮，然后给它们设置对应的样式类。 那问题来了，父组件怎么知道每一个子按钮的生命周期状态呢？ 这就需要子组件配合了。每个闪电按钮在它自己的 linkedCallback 生命周期钩子里，会触发一个自定义的 privatebuttonregister 事件，并且把一个回调函数传给父组件。父组件用这个回调来记录这个子按钮，并管理它的顺序。 反过来，如果某个按钮从 DOM 中被移除了，子组件的 disconnectedCallback 就会被调用，这时它会主动调用之前注册好的取消注册回调，通知父组件“我走了”，这样父组件就能及时更新自己的记录和样式。 这样一来，通过插槽、slotchange 事件和子组件的注册回调，整个按钮组就能优雅地、声明式地管理好子元素的样式和生命周期。这种方式非常灵活，是 LWC 中组件合成的一个优秀实践。 好了，这个例子就讲到这里，大家可以动手试试，感受一下声明式合成的魅力。