阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js v-slot

      v-slot

      • 缩写#

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

      • 参数:插槽名 (可选,默认值是 default)

      • 限用于

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

      用法

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

      示例

      <!-- 具名插槽 -->
      <base-layout>
        <template v-slot:header>
          Header content
        </template>
      
        Default slot content
      
        <template v-slot:footer>
          Footer content
        </template>
      </base-layout>
      
      <!-- 接收 prop 的具名插槽 -->
      <infinite-scroll>
        <template v-slot:item="slotProps">
          <div class="item">
            {{ slotProps.item.text }}
          </div>
        </template>
      </infinite-scroll>
      
      <!-- 接收 prop 的默认插槽,使用了解构 -->
      <mouse-position v-slot="{ x, y }">
        Mouse position: {{ x }}, {{ y }}
      </mouse-position>
      

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

      参考

      目录
      目录