Set Properties on Child Components

同学们好，今天我们来聊聊在 Lightning Web Components 里，父组件怎么把数据传给子组件。主要的方法，就是通过设置子组件的属性。 你看，在一个父组件的模板里，我们会给子组件的标签写一些属性，比如 ``。那这个 HTML 属性，到了子组件里，会直接变成对应的 JavaScript 属性。换句话说，`my-value` 就会映射到子组件类的 `myValue` 这个属性上。注意啊，JavaScript 习惯用驼峰命名，而 HTML 属性要求用短横线分隔的小写，也就是 kebab-case。这是 LWC 自动帮我们做的转换，但咱们写代码的时候，脑子里得有这根弦。 接下来重点来了，传数据时，原始值和非原始值的表现完全不同。什么是原始值呢？就是字符串、数字、布尔值，这些简单的家伙。你直接设一个字符串 `"张三"`，或者数字 `25`，子组件拿到立刻就能用，非常直觉，不会出什么意外。 但如果是对象和数组这一类非原始值，那规矩就变了。它们被传到子组件时，会被包装成只读的代理对象。说白了，就是你没法直接修改它里面的某个字段，比如 `this.person.name = "李四"`，或者往数组里直接 `push`。这么干，LWC 不但不会更新父组件的数据，控制台还会给你一个警告。这其实是框架的刻意设计，是为了保证数据流的清晰，避免子组件偷偷篡改父组件状态。 那如果我真想在子组件里改动这个对象，该怎么办呢？正确姿势是——先做一个浅拷贝。用扩展语法最方便，比如 `let newPerson = { ...this.person }`，然后去改这个副本，`newPerson.name = "李四"`，最后把整个新对象重新赋给属性：`this.person = newPerson`。数组也一样，先拷贝再修改，然后再赋值回来。只有这样，才符合 LWC 的数据更新机制，框架也才能追到变化，重新渲染。 简单总结一下，记住两点：第一，属性命名，JS 是驼峰，HTML 是横线；第二，传对象数组时它们是只读的代理，要改就先展开拷贝一份，再整体替换。掌握这个，父传子的数据通道就用得很顺了。 好了，这一页的知识点就是这些，大家可以在脑子里过一遍例子，加深印象。有什么疑问，随时提出来。