javascript - v 槽如何工作？

Question

不明白v-slot的机制。以及它是如何工作的。它如何绑定(bind)到变量。

在下面来自 vuetify 文档的代码中，请解释这部分:

<template v-slot:thumb-label="props">
   <span>
   {{ season(props.value) }}
   </span>
</template>

我不明白什么是“ Prop ”以及它如何与季节变化联系起来。

https://codepen.io/pumper/pen/NZZpeO

Answer 1

v-slot 覆盖默认的 thumb-label 插槽并传递 v-range-slider 值 prop(prop，或选择的内容)。它没有连接到 seasons 变量，而是调用 season() 方法并传递当前范围的值。