Base Component Composition — Composition Structure

同学们，我们接着来看Lightning Web Components中一个非常重要的设计模式，叫做“组合结构”。这个模式是大家在构建组件时最常用到的，也是最基础、最直观的一种方式。 想象一下，父组件就像一个容器，它里面留了一些空位，这些空位我们称为“插槽”。子组件呢，就可以放进这些插槽里，自动就形成了父子关系。这种声明式的写法，跟HTML的嵌套方式非常相似——你在模板里一眼就能看清楚整个组件的层级结构，哪个组件包含了哪个组件，一清二楚。 那除了简单的静态组合，我们还可以做动态组合。比如你有一组数据，可能是一个数组，里面每一项的数据都不一样。你可以用循环的方式，在父组件里遍历这个数组，把每个子组件动态地生成出来，再放进插槽里。这样，虽然子组件的数量是变化的，但父子之间依然保持着清晰的插槽关系。 举一些实际开发中常见的例子，你会发现这种组合结构无处不在。比如： - ，手风琴组件，（accordion）里，一定会包含多个，节，（section）； - ，面包屑，（breadcrumbs）里，包含一个个，面包屑项，（breadcrumb item）； - ，按钮组，（button-group）里，包含多个，按钮，（button）； - ，布局组件，（layout）里，包含多个，布局项，（layout-item）； - ，表单，（form）里，包含各种，输入/输出字段，（input/output field）； - ，选项卡集，（tabset）里，包含多个，选项卡，（tab）。 这样的组合对在标准组件里至少定义了十种，它们都遵循同一种模式：外层组件提供骨架，内层组件通过插槽填充具体内容。 那么，为什么我们要优先用这种组合方式，而不是单纯地通过属性（properties）来传递所有配置，把组件做成一个扁平的、大而全的结构呢？因为组合这种方式： 第一，，可读性高，。你看着模板代码，结构一目了然，维护的时候也不需要跳来跳去查属性。 第二，，可维护性好，。当你想调整某个子组件时，直接改它就行，不影响父组件的复杂逻辑。 第三，也是最重要的一点，它，符合HTML天然的工作方式，。Web开发的基础就是元素嵌套，组合就是让自定义组件也同样遵循这个思路，让学习曲线更平缓，也让组件之间的协作更自然。 所以，记住一点：在设计大部分用例的组件时，请尽量使用组合结构，而不是把所有东西都塞进属性里。这不仅能让你的代码更优雅，也帮你养成更符合标准Web开发思维的好习惯。 好了，这一小节就到这里，大家可以回味一下，下节我们再看具体的实现细节。