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

在这里切换是一个特殊的关键字吗？

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

换句话说，@click="toggle" 是否使 "active" true or false？

是的，当你点击<v-card>这个toggle功能将使active到true/false用的帮助model。

下面这行声明了一个作用域槽默认变量，并提供了一个作用域对象，其中包含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演示，这将更多的指导你理解的逻辑toggle和model。