Vuetify 幻灯片组 @click="toggle"

Question

来自本页的最后一个示例：https://vuetifyjs.com/en/components/slide-groups

我正在尝试了解以下实际工作原理：

<v-slide-item 
  v-for="n in 15" 
  :key="n" 
  v-slot:default="{ active, toggle }">

  <v-card 
    :color="active ? 'primary' : 'grey lighten-1'"
    class="ma-4" 
    height="200" 
    width="100" 
    @click="toggle"
  >

v-card 组件上有一个@click=toggle，它以某种方式影响了它的父组件v-slot？切换是这里的特殊关键字吗？

换句话说，@click="toggle" 使“活跃”为真还是假？

Answer 1

toggle 是这里的特殊关键字吗？

是的，它是一个原生函数，因为它位于您的 v-slot:default="{ active, toggle } 中。

换句话说，@click="toggle" 是否使true or false“活跃”？

是的，当您点击<v-card> 时，此toggle 功能将在model 的帮助下将active 变为true/false。

以下行声明了一个scoped slot 默认变量，并提供了一个范围对象，其中包含active, toggle

v-slot:default="{ active, toggle }"

---

我们还可以为v-card 创建自定义点击，在该点击中我们可以更改model 的值。如下所示

<v-card
    :color="active ? 'primary' : 'grey lighten-1'"
    class="ma-4"
    height="100"
    width="100"
    @click="onCardClick(n)"
>
//Custom click event
methods:{
    onCardClick(n){
      this.model = n - 1;
    }
}

我已经创建了codepen的demo，这将更能引导你理解toggle和model的逻辑。