0%

Vue.js 3 - Slot

剛學習 vue 的時候,對 slot 完全一竅不通,不了解要如何挖空多元件,來放入資料,更是不知道他能使用的時機是什麼時候,種種因素,讓我從官方文件找些範例釐清,也找了些文章閱讀加深記憶,順手也紀錄在部落格上~

使用時機:

  • 使用同一個 元件 , 但只有內文不同。
  • 有時候資料是靜態,不常變動,甚至需要大量重複。這情況不必要使用 props。
  1. 共用樣式
    官網的範例可以看到,讓按鈕的文字可以彈性的變化。

  2. named slot(具名插槽)

  • 建立一個元件,其中含有多個slot區塊
    範例連結
  1. Scoped slots(作用域插槽)
  • 把子元件的資料取出來,給父層使用
  • 不同於前面 slot 的使用,是由父層輸入資料呈現於頁面
    範例

資料來源:
vuejs
不只懂 Vue 語法:什麼是 slot?請示範 slot 的用法?
用範例理解 Vue.js #18:Slot