Named Slots

同学们，我们来看一下命名插槽。在Lightning Web Components里，有时候我们想在子组件中留好几个“洞”，每个洞放不同的内容，这时候命名插槽就派上用场了。 简单说，命名插槽让组件能定义多个不同的插入点。你在子组件的模板里用 `` 元素，并且给它一个 `name` 属性，比如 `name="firstName"`，这就成了一个具名插槽。没有名字的 `` 就是默认插槽。 然后，父组件在使用这个子组件的时候，通过给要插入的内容加上 `slot` 属性，把内容精确地送到对应的具名插槽里去。比方说，子组件里定义了 `firstName`、`lastName` 这两个具名插槽，还有一个默认插槽。父组件就可以这么写：外面套一个 `` 标签，里面放三个 ``，第一个写 `Willy`，第二个写 `Wonka`，第三个什么 `slot` 都不写，直接放 “Chocolatier”。这样一来，Willy 会进到 firstName 插槽，Wonka 进到 lastName 插槽，而 Chocolatier 因为没有指定插槽，就自动落入默认插槽。 每个命名插槽还可以放默认内容。什么意思呢？就是在子组件里写 `默认名字`，这样万一父组件忘了提供对应 `slot="firstName"` 的内容，那“默认名字”就会显示出来。这对做容错、让组件更健壮非常有用。 还有两个重要的细节要记住。一个是父组件那边的 `slot` 属性可以动态绑定，你可以写 `slot={dynamicName}`，dynamicName 可以是一个 JavaScript 表达式，只要它的计算结果是字符串就行。但注意，虽然能动态，子组件里 `slot` 元素上的 `name` 属性必须是静态的字符串文本，不能动态变化。也就是说 `` 是行不通的，必须直接写死，比如 `name="header"`。 再有就是类型转换：父组件传给 `slot` 属性的动态值会被强制转成字符串。如果传了一个没办法转成字符串的类型，比如 Symbol，就会当场抛出类型错误。所以在动态绑定的时候，务必确保值能正常转成字符串。 好，命名插槽就讲到这里，它让我们在组合组件时布局更加灵活，内容分发也特别清晰。同学们可以自己动手试试，就能更深刻地理解啦。