Pass Configuration and Data — Attributes Pattern

这节课我们来看看属性模式和插槽模式的区别，什么时候该用属性，什么时候该用插槽。 属性模式，其实可以看作插槽的一种替代方案。那它的核心思路是什么呢？就是配置和数据不是通过嵌套子元素传进去的，而是直接通过组件属性来传递。这样写出来的模板结构会更扁平，层次更少。但这种方式也有自己的局限性。假如你的组件需要支持很多变体，比如一个按钮组里要放好几种不同类型的按钮，每种按钮的元数据又不一样，那这个时候你要是用属性去配置，那个属性对象就会变得特别复杂，很难读，维护起来也很头疼。所以你看，我们 LWC 里的 button-group 组件，宁愿用插槽和组合的方式，而不是用一大坨属性。 那什么时候适合用属性模式呢？当你有这几个需求的时候：你需要精细地控制渲染，或者想要更简单的元数据校验，再或者你想直接渲染原生 HTML 元素来获得性能优势。我给你举个 Lightning Select 的例子。在这个组件里，选项是通过一个数组属性传进去的，组件内部直接渲染出原生的 select 和 option 元素。这样做比给每个选项都创建自定义组件实例高效多了。因为它扁平化了组件树，大大减少了渲染的负担。 总结一下，属性模式让结构变平，但遇到复杂变体会让属性对象很臃肿；而插槽模式更灵活，适合多变的组合场景。选择哪种，就看你是追求简单校验和原生性能，还是需要应对多变的子内容。