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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。