javascript - vue/vuetify 中的 {on, attrs} 有何作用？

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

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

“作用域槽”(或者从 Vue 3 开始只是“槽”)可以将数据传递给父组件。将插槽视为带有参数的函数。在这种情况下 activator <v-dialog> 的插槽正在传递一个包含属性 on 的对象和attrs用于槽内容模板内。您应该引用<v-dialog>了解如何使用这些数据的文档；在这种情况下<v-dialog>需要知道何时单击激活器才能显示对话框，这就是它公开 on 的原因和attrs您需要链接到您指定为对话框激活器的任何自定义按钮。

在很多组件库中，插槽公开 on 是很常见的。 (事件监听器)和 attrs组件要求您在模板中的组件上设置的(属性/ Prop )；为此，您可以使用 v-on和v-bind分别。引用docs查看如何以这种方式使用这些指令来一次绑定(bind)多个属性:

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

此特定语法( object destructing ):

<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属性只是被提取到单独的变量中。