课程章节介绍
今天我们聊聊LWC里一个很实用的技巧：动态加载组件。
想象一下，你页面上有个位置，但暂时不知道应该放哪个组件进去，就像搭积木时先留个空位。在LWC里，我们可以用 `` 这个特殊的标签，它就是一个“占位符”。它本身不渲染出任何实质内容，只是告诉框架：“这里一会儿要放一个真正的组件进来”。
那怎么把真正的组件填进去呢？关键就在 `lwc:is` 这个指令。你把它绑到一个变量上，到时候这个变量存的是一个组件的“构造函数”。框架一旦发现这个构造函数有值，就会把占位符替换成真正的组件实例。如果构造函数一直是空的（比如 `null` 或 `undefined`），那么页面就什么都不显示，这特别适合你想根据某些条件来决定要不要加载某个组件，也就是条件的组件加载。
好，那我们上哪弄到这个构造函数呢？可不能像平常一样在文件最上面用 `import` 语句，那样是静态的。我们要动态导入，用的是 `import()` 函数。注意，这是函数调用，不是那个静态的 `import` 语句，它返回一个Promise，等模块下载完，Promise就会resolve，并把模块导出内容给你。
这时候我们要的是那个模块的默认导出，因为通常LWC组件都是默认导出的。解构的时候写法是 `{ default: ctor }`, 这个 `ctor` 就是我们需要的组件构造函数。拿到之后，把它赋给那个绑定在 `lwc:is` 上的变量，框架就自动把新组件渲染出来了。
有一点要牢记：组件名称要写成 `c/yourComponentName` 的格式，`c` 是命名空间，一定要带上，否则框架找不到。
最后说一个写代码时的小陷阱。很多同学想把动态导入的Promise直接放在 `connectedCallback` 里用 `async/await`。但是请注意，`connectedCallback` 本身是同步执行的，如果你把它声明成 `async`，它不会等里面的await完，这可能导致子组件还没准备好，引发一些奇怪的问题。所以正确的做法是，在 `connectedCallback` 里调用一个单独的异步助手方法，比如叫 `loadComponent()`，让它去执行动态导入并赋值。这样既保证了生命周期钩子是同步的，又能异步加载你的组件。
简单总结一下：`lwc:component` 是个预留坑位，`lwc:is` 是往坑位里放哪个组件的开关，而这个开关的值由动态 `import()` 获取，最后在 `connectedCallback` 里用一个异步函数悄悄去做这件事。这样你的页面就能按需、灵活地加载组件了。
好了，关于动态加载组件的核心点就是这些，下节课我们来看具体的代码示例，会更直观。
关键词
LWC
Lightning Web Components
Salesforce