Scoped Slots — Overview & Basic Usage

好，咱们今天来讲讲一个挺实用的概念，叫“有范围的插槽”。你可以把它想象成子组件和父组件之间的一种合作方式，专门用来处理列表渲染这种场景。 打个比方，子组件手里有一堆数据，比如一个产品列表，但是它不知道怎么展示每个产品才好看；父组件呢，它懂得设计漂亮的卡片样式，但它没有数据。这时候有范围的插槽就派上用场了。 具体怎么玩呢？子组件会在它的插槽上绑定数据，用的是 `lwc:slot-bind` 这个指令，相当于说：“嘿，我这里有每个项目的具体信息，我把它传给你。”而父组件接收这个数据，通过 `lwc:slot-data` 和一个模板片段（template fragment），然后按照自己的想法把每一条数据渲染成界面元素。 有个关键点要记住：这种模式要求子组件必须使用轻型 DOM，也就是说，插槽不能在影子 DOM 里运行，但父组件就不受限了，它可以自己决定用哪种模式。另外，因为插槽内容的最终结构是由父组件决定的，所以父组件自己的 CSS 样式也能直接作用上去，这很方便控制外观。 那为什么要叫“有范围”呢？因为虽然是子组件在循环数据——它会根据数据有多少项，就创建多少个插槽实例——但每个实例接收到的数据只属于那一条，父组件只是照着模板把这一条数据画出来。这就相当于，子组件管理“循环逻辑”，父组件只负责“把一条数据变成界面”，两个组件的职责分得很清楚。最终，我们就实现了一个灵活的列表：父组件定义行模板，子组件处理数据循环，彼此不干扰，又能完美配合。 这就是有范围的插槽，它让组件之间的复用性和灵活性都提高了不少。