I created a simple v-dialog using Vuetify. It uses v-slot:activator with destructured data, namely {on, attrs }. While I can understand on part then I can't get what's the purpose of attrs? If I remove it then dialog still works fine. How it works and what is it for?

Here some basic example from Vuetify docs:

<template>
  <div >
    <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 >
          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>

CodePudding user response：

Its purpose is to give you set of attributes/props that you can easily bind with v-bind="attrs" (using object binding syntax) to the component you choose as an activator

In the case of v-dialog its content is generated by default implementation of activatable mixin and generates some ARIA attribute but the component using the mixin can override or extend it (as for example v-menu does)