vue.js - v-slot : activator? 中 {attrs} 参数的用途是什么

Question

我使用 Vuetify 创建了一个简单的 v-dialog。它使用带有解构数据的v-slot:activator，即{on, attrs}。虽然我可以理解 on 部分，但我无法理解 attrs 的目的是什么？如果我删除它，那么对话框仍然可以正常工作。它是如何工作的，它有什么用？

这里是 Vuetify 文档中的一些基本示例:

<template>
  <div class="text-center">
    <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>

      <v-card>
        <v-card-title class="text-h5 grey lighten-2">
          Privacy Policy
        </v-card-title>

        <v-card-text>
          Lorem ipsum dolor sit amet...
        </v-card-text>

      </v-card>
    </v-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
      }
    },
  }
</script>

Answer 1

它的目的是为您提供一组属性/ Prop ，您可以使用 v-bind="attrs"(使用 object binding syntax )轻松绑定(bind)到您选择作为激活器的组件

在 v-dialog 的情况下，其内容由 activatable mixin 和 generates some ARIA attribute 的默认实现生成但是使用 mixin 的组件可以覆盖或扩展它(例如 v-menu does )