在 Vue.js 中，“插槽 x”和“插槽 y”通常体现组件内部界说的两个签字插槽。x、y 只是插槽名称，可以替换成 header、footer、actions 等更有营业寄义的名字。子组件通过 <slot name="x"> 和 <slot name="y"> 声明位置，父组件再通过同名插槽把内容传入。

若是插槽还需要把子组件中的数据传给父组件，就要使用作用域插槽。因此，明确插槽 x 与插槽 y 的要害是：先让父子组件的插槽名称对应，再凭证是否需要转达子组件数据，选择通俗签字插槽或作用域插槽。

插槽 x 和插槽 y 的基本写法

下面的子组件界说了两个签字插槽。插槽名称划分是 x 和 y，名称自己没有特殊寄义，只认真建设父子组件之间的对应关系。

父组件使用该组件时，需要用 <template #x> 和 <template #y> 划分填充两个位置：

渲染时，父组件中标记为 x 的内容会泛起在子组件的 x 插槽位置，y 的内容会泛起在 y 插槽位置。只要名称纷歧致，内容就不会进入预期位置。

默认插槽、签字插槽和插槽 x y 的关系

默认插槽

没有设置 name 的 <slot> 就是默认插槽。它适合组件中只有一个可替换内容区域的场景。

父组件可以直接在组件标签内部写入内容，不需要指定插槽名称：

签字插槽

当一个组件保存多个内容区域时，就需要使用签字插槽。插槽 x 和插槽 y 实质上就是两个签字插槽。Vue 3 以及 Vue 2.6 及以上版本通常使用缩写语法：

完整写法是 v-slot:x 和 v-slot:y。在 Vue 2 的较早版本中，还经？吹 slot="x" 写法。维护旧项目时应先确认项目使用的 Vue 版本，不要把差别版本的语法混用。

作用域插槽：让 x 或 y 插槽吸收子组件数据

通俗签字插槽只能传入父组件准备好的内容。若是插槽中的模板需要使用子组件内部的数据，例如列表项、状态或操作要领，就要由子组件通过插槽属性向外传值。

子组件可以在 x 插槽上袒露一个 item 数据：

父组件通过解构方法吸收这个插槽参数：

若是 y 插槽也需要数据，可以单独界说自己的插槽属性：

这里的 x 和 y 仍然只是插槽名；真正决议是否属于作用域插槽的，是 <slot> 是否向父组件提供了数据或要领。

同时使用默认插槽、x 插槽和 y 插槽

一个重大组件可以同时保存默认插槽和多个签字插槽。例如卡片组件把主体内容放到默认插槽，把顶部和底部操作区划分命名为 x、y：

父组件使用时，未标记名称的内容进入默认插槽，标记为 x 和 y 的内容进入响应位置。三者互不冲突，但统一个插槽名称最好只保存一个明确的内容泉源，阻止阅读和维护难题。

插槽 x 插槽 y 不生效时怎样排查

• 检查名称是否完全一致：子组件的 name="x" 必需对应父组件的 #x，巨细写、拼写和短横线都要坚持一致。
• 确认插槽写在组件标签内部：插槽内容必需作为组件的子内容传入，不可把 <template #x> 放在组件外部。
• 确认使用了准确的语法：Vue 3 和 Vue 2.6 以上优先使用 v-slot 或 #；旧版 Vue 2 项目可能需要 slot="x"。
• 检查是否误用了默认插槽：没有 #x 或 #y 标记的内容，会进入默认插槽，不会自动匹配到签字插槽。
• 检查作用域参数名称：子组件传出的是 item，父组件却直接使用不保存的变量时，插槽可能显示为空或爆发运行时过失。
• 确认组件确实渲染了插槽：若是子组件模板中没有对应的 <slot name="x"> 或 <slot name="y">，父组件纵然传入内容也没有显示位置。

插槽名称应该怎样选择

x、y 适合演示或暂时验证，但在正式组件中，建议使用能够表达位置或功效的名称，例如 title、content、actions、empty。这样其他开发者不看子组件实现，也能明确插槽用途。

若是只是替换静态结构，使用签字插槽即可；若是父组件必需凭证子组件数据决议展示方法，再使用作用域插槽。插槽数目较多时，应优先按页面结构和组件职责拆分，阻止把所有内容都塞进一个同时包括大宗 x、y、z 插槽的组件中。

校对：张宏民(FZlHHgmlPxhACBItHaE3fb6dpCj35Y)