vue.js - 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 的父组件？这里toggle是一个特殊的关键字吗？

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

Answer 1

Is toggle a special keyword here?

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

In other words, does @click="toggle" make "active" true or false?

是的，当您点击 <v-card> 时这个toggle函数将使 active至 true/false在 model 的帮助下.

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

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

---

我们还可以为 v-card 创建自定义点击在那个点击里面我们可以改变model值(value)。如下图

<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 .