课程章节介绍
今天我们来聊聊Lightning Web Components里一个挺特别的组件——LightningModal。它和普通组件不太一样，别的组件我们都是在HTML模板里直接写标签，比如``，但LightningModal呢，它不能用标签，而是要通过JavaScript类去扩展。
简单来说，你写一个模态框组件的时候，不是像以前那样继承`LightningElement`，而是继承`LightningModal`这个专门的类。这样，你的组件就有了模态框的全部能力。
模板结构上也很有意思，里面有三个帮手组件可以帮你快速搭出标准的弹窗样式：一个是`lightning-modal-header`，你想加标题就用它，是可选的部分；一个是`lightning-modal-body`，这个是必须有的，你的主要内容就放在这里面；还有一个是`lightning-modal-footer`，底部区域，比如放个关闭按钮，也是可选的。这样你就不用自己从头写样式，结构清晰还统一。
那怎么打开这个模态框呢？不是靠传统的父子组件嵌套，而是直接在父组件里引入你的模态框组件，然后调用它的静态方法`Modal.open()`。你可以往里面传一个配置对象，同时如果模态框需要接收一些数据，你可以在里面通过`@api`装饰的属性来接收，数据就会从父组件传进来。
那模态框怎么把结果返回给父组件呢？很简单，在模态框组件里，你调用`this.close(要返回的值)`就行了。父组件那边，因为`Modal.open()`返回的是一个Promise，你用`await`就能拿到这个结果，就像询问一个问题，然后等弹窗给回复一样。
这样整个流程就非常清晰：父组件通过静态方法打开弹窗，顺便把数据传进去；用户在弹窗里操作完后，弹窗关闭并通过`close`把结果传回来；父组件收到结果，继续往后处理。而且这个弹窗是完全可以自定义的，你可以在body里放任何内容。
记住这个模式：继承`LightningModal`，用那三个助手搭结构，通过`@api`接收数据，用`close`返回结果，父组件用`await Modal.open()`打开并获取结果。这样就掌握了LightningModal的核心用法。
关键词
LWC
Lightning Web Components
Salesforce