Soy consciente de que esta pregunta ya se ha hecho, pero todavía me cuesta entender qué significa.
<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>(que se toma de la documentación oficial de vuetify https://vuetifyjs.com/en/components/dialogs/#usage , pero sospecho que solo hay una cosa de JS que no entiendo).
¿Qué significa {on, attrs} y cómo se propagan hasta v-btn donde se usan en v-on y v-bind ?
Hay algunos conceptos aquí que necesitan ser explicados.
Las "ranuras con alcance" (o simplemente "ranuras" desde Vue 3) pueden pasar datos al componente principal. Piense en la ranura como una especie de función con argumentos. En este caso, el espacio activator de <v-dialog> pasa un objeto que contiene propiedades y attrs on usar dentro de la plantilla de contenido del espacio. Debe consultar los documentos de <v-dialog> para saber cómo se deben usar estos datos; en este caso, <v-dialog> necesita saber cuándo se hace clic en el activador para presentar el diálogo, por lo que expone on y attrs que necesita vincular a cualquier botón personalizado que designe como activador de diálogo.
En muchas bibliotecas de componentes, es común que las ranuras se expongan (escuchas on eventos) y attrs (atributos/accesorios) que el componente requiere que establezca en un componente de la plantilla; para esto usas v-on y v-bind respectivamente. Consulte los documentos para ver cómo se pueden usar estas directivas de esta manera para vincular múltiples atributos a la vez:
<!-- binding an object of attributes --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>Esta sintaxis específica ( destrucción de objetos ):
<template v-slot:activator="{ on, attrs }"> <v-btn v-bind="attrs" v-on="on">es lo mismo que esto:
<template v-slot:activator="scope"> <v-btn v-bind="scope.attrs" v-on="scope.on"> Las propiedades on y attrs simplemente se extraen en variables separadas.