Vue.js v-slot用法及代码示例

表示指定的插槽或期望接收道具的插槽。

速记： #

Expects：在函数参数位置有效的 JavaScript 表达式，包括对解构的支持。可选 - 仅在期望将道具传递到插槽时才需要。

参数：插槽名称(可选，默认为default)

仅限于：

<template>
components(用于带有道具的单独默认插槽)

例子：

<!-- Named slots -->
<BaseLayout>
  <template v-slot:header>
    Header content
  </template>

  <template v-slot:default>
    Default slot content
  </template>

  <template v-slot:footer>
    Footer content
  </template>
</BaseLayout>

<!-- Named slot that receives props -->
<InfiniteScroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</InfiniteScroll>

<!-- Default slot that receive props, with destructuring -->
<Mouse v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</Mouse>

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 v-slot。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。