Pass Markup into Slots — Overview

同学们，今天我们来聊聊 Lightning Web Components 里面一个很贴心的设计，叫做“插槽”，也就是 slot。 你可以把插槽想象成子组件留给父组件的一个“空位”。以前我们往子组件里传的都是数据，但现在，插槽能让你直接把活生生的 HTML 标记、DOM 元素传进去。这意味着父组件不仅能给数据，还能直接决定子组件某一块区域长什么样。 具体怎么实现的呢？子组件的模板里，用 `` 标签占个位置，就像在说：“这儿有个空缺，谁来填？” 当父组件使用这个子组件，并且把内容写在它的标签之间的时候，这段内容就会在渲染时，自动替换掉那个 `` 占位符。父组件给了什么，子组件里面就显示什么。 一个组件可以不设插槽，也可以设很多个插槽。插槽主要分两种类型： 第一种是“未命名的插槽”，也就是默认插槽。子组件模板里就写一个光秃秃的 ``，不指定名字。父组件在子组件标签之间随便放什么标记，只要没有特别指定，就全都会掉进这个默认插槽里。 第二种是“命名插槽”。子组件里写 ``，给它起个名字，比如叫 header。父组件想往这个特定位置填内容，就要在自己写的元素上，加上 `slot="header"` 这个属性来配对。只有名字匹配上了，内容才会灌到对应的槽里。这样一来，父组件就能精准控制子组件里不同区域的显示了。 好，接下来有几个重要限制，你一定要记住，别踩坑。 首先，你不能把 Aura 组件直接塞进插槽里，这行不通。其次，就算你的 LWC 本身支持插槽，但如果这个 LWC 是包裹在 Aura 组件里面的，它也不能被当作内容传给其他组件的插槽。原因在于 Aura 和 LWC 的渲染机制有沙箱隔离，跨框架的 DOM 传递是被阻断的，所以这点在设计混合架构时要格外当心。 最后，如果你在用 Experience Cloud 的 LWR 站点，插槽还有一个很棒的用途：它可以直接变成 Experience Builder 里的拖放区域。业务人员不用写代码，就能在页面构建器里把组件拖到这些插槽位置上，实现灵活的内容布局。 好了，关于插槽的机制、类型和几点注意事项就讲到这里。简单总结一下：插槽让父组件可以把标记传给孩子，分清默认槽和命名槽，同时牢记不能跨 Aura 传递，并且在 LWR 站点里它还是个可拖放的构建区域。搞懂这些，你在设计灵活通用组件的时候就会更加得心应手了。