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>
更多细节请查阅以下链接。
