我知道已經有人問過這個問題，但我仍然很難理解它是什么意思？
<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？
uj5u.com熱心網友回復：
這里有幾個概念需要解釋。
“作用域插槽”（或自 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特性只是被提取到獨立的變數。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/328310.html
標籤：javascript Vue.js
上一篇：從VueJS中的URL獲取引數