Pass Data to Child & Slots in Custom Elements

大家好，今天我们来聊聊在Lightning Web Components中，怎么把数据和内容传给子组件，这跟咱们熟悉的标准LWC模式其实很像。 先说数据传递。如果你想向子组件发送一堆属性，父组件里可以用一个特殊的指令叫lwc:spread，它相当于把一组属性“展开”传递给子组件。子组件那边呢，只要在对应的属性上加上@api装饰器，就能接收到这些值了。非常简单，就像把一叠卡片一下子递给对方，对方伸手接住就行。 接着是内容传递，这里用到的就是插槽——slot。在自定义元素内部，你可以定义插槽的位置，好比在模板里挖好一个空位。父组件在调用这个子组件时，只要把内容写在它的标签之间，这段内容就会自动填进那个空位。这和标准LWC插槽的用法是一模一样的：自定义元素在它的影子DOM里写好slot元素，使用方只要在标签中间放内容就可以。 如果涉及到命名插槽，原理就是匹配名字。子元素上给一个slot属性指定名称，插槽元素那边用name属性来对应。名字一样的，就会配对成功。要是内容上没有slot属性，那它就会掉进默认插槽，也就是没有名字的那个。 最后提醒一点，一个重要的限制：如果你在项目中用的是第三方组件，要注意合成阴影插槽是不被支持的。也就是说，slot只有在浏览器原生支持的Shadow DOM环境下才能完美工作。好消息是，原生Shadow DOM还会保留顶级自定义元素里面的插槽内容，确保结构清晰。 总结一下，就是把属性用lwc:spread传过去，内容用slot机制填进去，命名插槽靠名称匹配，默认插槽兜底。但务必确保运行环境是原生Shadow DOM，这样才能保证插槽行为不出错。 今天的知识点就是这样，咱们下次继续。