Dynamic Component — Attributes, Children & Properties

好，咱们今天聊一聊 Lightning Web Components 里动态组件的几个关键点。这块内容其实不复杂，但有些小细节你理解了之后，开发的时候会少踩很多坑。 首先，动态组件和静态组件几乎支持完全一样的 HTML 属性和指令。像 id、class、事件绑定这些，动态组件该有的全都有。唯一要注意的例外，就是一个叫 ，lwc:externative， 的属性，动态组件是不支持的。所以如果你在静态组件里用过它，切到动态组件的时候，这里要留个心。 接下来是渲染顺序。当你在模板里用了 `lwc:component` 这个元素，它里面是可以放一些子元素的。这些子元素，不会跟动态组件同时出现，而是会等到动态组件自己渲染完成之后，才被挂到页面上。也就是说，动态组件先到位，里面的静态子元素后出现。这个顺序在调试布局和加载时序的时候要记住。 再讲一个非常重要的机制：当动态组件的构造函数发生更改的时候——说白了就是你要切换成另一个组件——LWC 不会只是温柔地把组件换掉，而是会把整个子树连根拔掉，然后重新建一棵新的。这棵“子树”包括这个动态组件本身，以及它里面嵌套的所有东西。所以，切组件时，之前组件的所有状态、本地数据都会丢失，这是一个彻底的销毁和重建过程。 然后是属性传递。给动态组件传值，有两种方式。第一种最简单：当你早就知道要渲染哪个组件，而且属性值也是写死的，直接在标记里写就行，就跟静态组件传属性一模一样。比如 `` 这样。 第二种方式就更灵活了，用 ，lwc:spread， 指令。它的作用，是让你可以在运行时动态计算一个属性对象，然后一下子把所有键值对传给组件。这在你不知道具体渲染哪个组件，或者不同组件接受的属性集不一样时，特别有用。你想啊，一个组件要 `title`，另一个可能只要 `message`，你提前把属性打包成一个对象，用 `lwc:spread` 往上一贴，完美适配，代码也干净。 所以，总结一下：动态组件几乎全兼容，只差一个 `lwc:externative`；里面的子元素会后渲染；切组件就是整棵子树替换；属性传值，静态的直接写，动态的靠 `lwc:spread` 搞定，尤其适合那种需要灵活分发属性的场景。 把这些点吃透，动态组件你就能用得得心应手了。