{on, attrs}在vue/vuetify中做什么?

Question

我知道这个问题已经被问过了，但我仍然很难理解它是什么意思?

<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="red lighten-2"
dark
v-bind="attrs"
v-on="on"
>
Click Me
</v-btn>
</template>

(取自官方vuetify文档https://vuetifyjs.com/en/components/dialogs/#usage，但我怀疑有一个JS的东西，我不理解)。

{on, attrs}是什么意思?它们如何向下传播到v-btn，并在v-on和v-bind中使用?

Answer 1

这里有几个概念需要解释。

"作用域slots"(或者只是"插槽")因为Vue 3)可以将数据传递给父组件。把槽想象成一个带参数的函数。在这种情况下，<v-dialog>的activator插槽正在传递一个包含属性on和attrs的对象，用于在插槽内容模板中使用。您应该参考<v-dialog>文档来了解如何使用这些数据;在本例中，<v-dialog>需要知道何时单击激活器以显示对话框，这就是为什么它暴露了on和attrs，您需要链接到指定为对话框激活器的任何自定义按钮。

在许多组件库中，插槽暴露on(事件监听器)和attrs(属性/道具)是很常见的，组件需要你在模板中设置组件;为此，分别使用v-on和v-bind。参考文档，了解如何以这种方式使用这些指令来一次绑定多个属性:

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

这个特定的语法(对象析构):

<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">

与以下相同:

<template v-slot:activator="scope">
<v-btn v-bind="scope.attrs" v-on="scope.on">

on和attrs属性只是被提取到单独的变量中。