Custom Properties — todoItem Example

同学们，今天我们来聊聊怎么在Lightning Web Components里创建自定义的公共属性，也就是让父组件能传数据给子组件。 首先，我们要从lwc模块里导入一个叫api的装饰器。这个装饰器就像是一个开关，能把类里面的字段暴露出去。比如我们有个待办事项组件，想让父组件传一个事项名称进来，我们就可以在JavaScript里声明一个itemName属性，用@api来装饰它，还给它一个默认值，比如“新项目”。这样，如果父组件不传值，它就会显示默认的“新项目”。 然后在模板里，直接用{itemName}这个表达式显示出来就行了，很简单。 接下来是命名规范，这个点特别重要，但也容易混淆。在JavaScript里，属性名我们习惯用驼峰写法，比如itemName，单词首字母大写。但在HTML模板里，属性名必须用短横线分隔，也就是kebab-case，写成item-name。这是为了遵守HTML标准。你可能问为什么？因为浏览器只认全小写加连字符的属性，Salesforce框架会自动把kebab-case的属性名转换成camelCase的JavaScript属性。所以父组件用的时候，要写item-name，框架会聪明地把它映射到itemName上。 举个例子，父组件可能是这样写的：c-todo-item，然后给它一个属性item-name="买牛奶"。这时框架就会把“买牛奶”这个值传给子组件的itemName属性，实现数据传递。 这里要记住，为了演示清晰，咱们这个例子用了静态值。但实际项目里，你不太会传死值，通常是用for:each指令循环一个动态数组，比如一堆待办事项，每个事项都是不同的值，这样才能真正发挥组件的复用性。 好，这节课的核心就是：导入api，用@api公开属性，注意代码里的驼峰和模板里的短横线转换，父组件用kebab-case传值。掌握了这个，子组件和父组件就能顺畅地“对话”了。