Parent and Child

我们来讲一下 Lightning Web Components 里面，父组件和子组件是怎么配合工作的。 你可以这样理解，父组件和子组件就像是一对直接的包容关系。想象一个俄罗斯套娃，大娃里面装着小娃，父组件就是那个大娃，子组件就是被装在里面的小娃。怎么装进去的呢？很简单，就是在父组件的 HTML 模板里，直接用子组件的标签把它放进去。就像写普通的 HTML 元素一样，比如你有一个子组件叫 ``，那你在父组件的模板里直接写上 ``，这就建立起了父子关系。 那这两个组件在项目里是怎么放的呢？在我们的 Salesforce DX 项目结构里，它们通常在同一个 `lwc` 文件夹下面，但是各住各的文件夹。每个组件都有自己的小窝，里面装着它自己的 HTML 模板、JavaScript 逻辑文件，还有一个可选的 CSS 样式文件。为什么要分开放呢？这就是为了强制执行封装的概念：每个组件都独立管理自己的长相、行为和样式，互不干扰。子组件不会去乱动父组件的东西，父组件也不能随便改子组件的内部逻辑。 这种物理上的分离，保证了封装性，而组件之间的组合，就是通过父模板里的那个标签包含来完成的。所以，整个组件树就是在模板这一层，用标签包含的方式一层一层搭起来的。这就是 LWC 里父子组件的基本构成了，简单、清晰，也很容易维护。