来自本页的最后一个示例: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”为真还是为假?
最佳答案
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
.
关于vue.js - Vuetify 幻灯片组 @click ="toggle",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58156878/