v-slot

  • 缩写：#

  • 预期：可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。

  • 参数：插槽名 (可选，默认值是 default)

  • 限用于

    • <template>
    • 组件 (对于一个单独的带 prop 的默认插槽)
  • 用法：

提供具名插槽或需要接收 prop 的插槽。

  • 示例：
  1. <!-- 具名插槽 -->
  2. <base-layout>
  3.   <template v-slot:header>
  4.     Header content
  5.   </template>
  7.   Default slot content
  9.   <template v-slot:footer>
  10.     Footer content
  11.   </template>
  12. </base-layout>
  14. <!-- 接收 prop 的具名插槽 -->
  15. <infinite-scroll>
  16.   <template v-slot:item="slotProps">
  17.     <div class="item">
  18.       {{ slotProps.item.text }}
  19.     </div>
  20.   </template>
  21. </infinite-scroll>
  23. <!-- 接收 prop 的默认插槽，使用了解构 -->
  24. <mouse-position v-slot="{ x, y }">
  25.   Mouse position: {{ x }}, {{ y }}
  26. </mouse-position>

更多细节请查阅以下链接。