vue3-Slots

意犹未尽發表於2024-04-03

文件連結

https://cn.vuejs.org/guide/components/slots.html#slots

說明

slot 插槽,是子元件提供給父元件使用的一個佔位符,父元件可以在這個佔位符中填充任何模板程式碼。主要作用就是更好的擴充和定製化元件,例如彈窗元件、表格元件等。分為預設插槽、具名插槽和作用域插槽。

其中前兩個都是渲染在父級,本質上就是替換,父元件渲染完畢之後替換對應的 slot;區別在於具名插槽就是給插槽取了名字;

而作用域插槽在元件內部渲染。本質上會把父元件的內容渲染成函式,子元件呼叫函式,並且將資料傳遞給它。當需要將子元件的資料交給父元件展示,此時就可以使用作用域插槽。給資料一個新的作用域,因此叫做作用域插槽。