Pass Data to a Custom Element — Attributes & Properties

同学，咱们今天来讲一个关于Lightning Web Components里数据传递的细节，这个点虽然有点绕，但是理解了以后能避免很多坑。 你往自定义组件里传数据的时候，LWC默认是按照HTML属性的方式来传的。什么是HTML属性？就是在标签上写的那一串东西，它本质上都是字符串。所以如果你直接传过去一个布尔值true，LWC会把它转成字符串“true”传进去。 如果你的组件里面恰好有同名的属性设置器（setter），LWC就会聪明地用那个setter来接收数据，这就变成真正的JavaScript属性了。那这三者有什么区别呢？关键就在于后续的变化。 如果你用的是HTML属性，当外界数据发生变化、重新渲染时，LWC默认不会自动再帮你调那个属性了。要是你想响应这种变化，就得自己实现两个生命周期钩子：一个是`attributeChangedCallback`，一个是`renderedCallback`。否则，属性的变化会被悄悄地忽略掉，你的组件外观不会更新，这就是最容易出bug的地方。 那怎么省事儿呢？用属性的getter和setter模式。你只需要在组件类里定义好getter和setter，LWC在传值的时候就会自动检测到，然后调用setter，并且帮你处理好类型的序列化和反序列化。比如你传布尔值，setter收到的是真正的布尔值，而不是字符串“true”，省去了自己转换的麻烦。 最后，如果自定义组件要接收一堆属性值，LWC提供了一个很方便的指令叫`lwc:spread`，你可以直接把一个对象展开传给组件，它会自动把对象的属性对应到组件里的setter上。这种方式特别适合属性很多的时候，代码简洁又不容易出错。 简单总结一下：传数据优先用属性setter/getter，这样类型自动转换，变化也能自动响应。如果想直接控制变化时机，就用HTML属性加回调函数。批量传值就用`lwc:spread`。记住了吗？下次写代码的时候，多留意这些细微差别，你的组件就会变得更健壮。