课程章节介绍
好,我们接着看这一页幻灯片,讲的是Lightning Web组件的结构和命名规范,这个基础一定要打牢。
首先,每个Lightning Web组件,在代码里就是一个文件夹,放在`force-app/main/default/lwc/`这个路径下面。注意,文件夹的名字和它里面最核心的几个文件,必须保持相同的名字。比如你给文件夹取名`myComponent`,那里面就得有`myComponent.html`、`myComponent.js`这些文件。
那一个最基本的UI组件需要哪些文件呢?最少得有三个:
一个HTML文件,这个文件大小不能超过128KB,而且它最外层的根标签必须是``。
一个JavaScript文件,大小上限是1MB,里面的类要继承自`LightningElement`。
还有一个配置文件,名字后面加个`.js-meta.xml`,这个文件告诉Salesforce这个组件该怎么暴露出去使用。
除了这三个必需的,你还可以加可选的CSS文件,大小也是128KB以内,用来装饰组件样式。如果你想要自定义图标,可以在文件夹里放一个JPEG图片。这些都是可选的,按需来就行。
接下来是命名规则,很重要,因为不遵守的话代码会报错。
组件的名字必须以小写字母开头(其实幻灯片上写的“收件箱规则”可能是笔误,应该是“命名规则”),只能用字母、数字和下划线,不能有连字符,并且在整个命名空间里要是唯一的。
有意思的是,文件夹的名字我们用的是驼峰写法,比如`myComponent`,但在HTML里引用它的时候,要用短横线分隔的kebab-case写法,并且加上命名空间前缀`c-`,就成了``。这个映射关系别搞混了。
最后一点,组件文件夹不能套娃,就是你不能在一个组件文件夹里再嵌套另一个组件文件夹。每个组件都是平级地放在`lwc`目录下的,这点一定要记住。
所以总结一下,每个LWC就是一个规范的文件夹,里面有固定的文件结构,名字统一,写法对应好,这样Salesforce平台才能正确识别和渲染你的组件。接下来我们看看具体的代码示例,会更清楚。好,这一页讲完了,有问题随时打断我。
关键词
LWC
Lightning Web Components
Salesforce