作用域插槽 · vue筆記

[TOC] >[success] # 作用域插槽 **需求** ： **組件內循環 div 標簽，這個標簽有可能不僅限于 div ，想通過父組件來決定循環的是什么標簽** 。 **解決辦法** ：只需要在 **子組件slot標簽** 上 **定義屬性** 傳給 **父組件** ， **父組件** 只需要在 **調用子組件的標簽** 上寫 **v-slot="slotProps"** 來 **接收數據** ，在 **插槽內容** 中 **slotProps.xxx** ，就可以取到傳遞過來的數據了。 **作用域插槽應用場景** ： **當子組件的渲染內容，要由父組件決定的時候** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用插槽和具名插槽解決組件內容傳遞問題</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ template: ` <list v-slot="slotProps"> <div> {{ slotProps.item }} </div> </list> ` }) // 子組件 app.component('list', { data(){ return { list: [1, 2, 3] } }, template: ` <div> <slot v-for="item in list" :item="item" /> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 上面的 **v-slot="slotProps"** 是一個 **對象** 實際上這里有 **簡寫形式** ，可以寫成對象的 **對象解構賦值** ，如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用插槽和具名插槽解決組件內容傳遞問題</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ template: ` <list v-slot="{ item }"> <div> {{ item }} </div> </list> ` }) // 子組件 app.component('list', { data(){ return { list: [1, 2, 3] } }, template: ` <div> <slot v-for="item in list" :item="item" /> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~