Блог

Я знаю, что этот вопрос уже задавался, но я все еще пытаюсь понять, что это значит?

 <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 , но я подозреваю, что есть только одна вещь, которую я не понимаю).

Что {on, attrs} означает и как они распространяются вплоть до v-btn того, где они используются в v-on и v-bind ?

Здесь есть несколько концепций, которые необходимо объяснить.

«Слоты с областью действия» (или просто «слоты», начиная с Vue 3) могут передавать данные родительскому компоненту. Думайте о слоте как о функции с аргументами. В этом случае activator слот <v-dialog> передает объект, содержащий свойства 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 просто извлекаются в отдельные переменные.