剛學習 vue 的時候,對 slot 完全一竅不通,不了解要如何挖空多元件,來放入資料,更是不知道他能使用的時機是什麼時候,種種因素,讓我從官方文件找些範例釐清,也找了些文章閱讀加深記憶,順手也紀錄在部落格上~
使用時機:
- 使用同一個 元件 , 但只有內文不同。
- 有時候資料是靜態,不常變動,甚至需要大量重複。這情況不必要使用 props。
共用樣式
從 官網的範例可以看到,讓按鈕的文字可以彈性的變化。named slot(具名插槽)
- 建立一個元件,其中含有多個slot區塊
範例連結
- Scoped slots(作用域插槽)
- 把子元件的資料取出來,給父層使用
- 不同於前面 slot 的使用,是由父層輸入資料呈現於頁面
範例
資料來源:
vuejs
不只懂 Vue 語法:什麼是 slot?請示範 slot 的用法?
用範例理解 Vue.js #18:Slot