@click=“切换”

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组件上有一个@click=toggle，它会以某种方式影响其v-slot的父组件吗？这里有一个特殊的关键字吗？

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

Answer 1

这里有一个特殊的关键字吗？

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

换句话说，@click=的“切换”是否使“活动”true or false？

是的，当您单击到<v-card>时，这个toggle函数将在model的帮助下使active变为true/false。

下面的行声明了一个作用域槽默认变量，并提供了一个scope对象，其中包含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;
    }
}

我已经创建了码页演示，这将更多地指导您理解toggle和model的逻辑。