Run Code on slotchange

DEX475 - Composition

📄 第 90 页 🎬 视频课程

课程章节介绍

咱们今天来聊聊 `slotchange` 这个事件。你可以把它想象成插槽里的“保安”,专门盯着插槽门口进出了哪些直接孩子。 首先,什么时候会触发这个事件呢?很简单——当插槽里的,直接子元素,被添加或者移除的时候就会触发。注意啊,是“直接子元素”,也就是直接放在 `` 标签之间的那些节点。比如你动态地往插槽里扔一个新的 `
`,或者把原本在里面的一个 `

` 删掉,这个事件就会立刻通知你。 但是,如果插槽里的某个子元素自己内部发生了改动——比方说它自己改了个文本、换了个页脚,但没有被从插槽里移除或新增——那 `slotchange` 就不会理睬。因为它只关心插槽的直接孩子变没变,不关心孙子辈的内容。 那这个事件怎么传播呢?它会在 DOM 里向上冒泡,但有一条重要的红线:它,不会穿过阴影边界,。也就是说,只有拥有这个插槽的组件自己才能监听到这个事件。外层的组件是收不到的。这听起来像限制,但实际正是我们想要的效果:只有父组件需要对插槽内容的变化做出反应,从而管理里面子组件的生命周期,比如初始化或者销毁一些东西。 所以总结一下,`slotchange` 就是我们用作管理插槽内容生命周期的主要工具。当你在父组件里监听到这个事件时,就可以安全地对新进来的子组件做处理,或者清理已经离开的子组件。记住这一点,处理动态插槽就顺手多了。

关键词

LWC Lightning Web Components Salesforce