[筆記] Vue 關於 slot-scope 的簡易認知

Vue 的 slot 系列使用方法,頭一回在 Element-UI 這個模組上看見,覺得用法挺神奇的,於是便筆記一下個人對 slot 的理解,以及怎樣的場景會使用到。
vue.js logo vue


核心概念

slot 可以分為匿名、具名以及包含資料的 Slot。
前兩者為:當父組件有在引用的子組件內寫模版<template>的話,那麼子組件就會將其內標註為 <slot></slot> 的地方,用父組件提供的模版表示。
帶有資料的 Slot 則是:父組件提供樣式,但是顯示的資料則是由子組件提供。換言之,這是一個簡易的方法讓父組件直接取得子組件內的資料,並將以顯示。這樣的話,就不必先請子組件將資料 $emit 到父層,然後父層接收之後再調用相關的 methods。

類型

匿名 Slot

一個 Component 裡面,只能有一個匿名插槽 (Slot)。Demo:https://codesandbox.io/s/brave-surf-99h0s

具名 Slot

雖說一個 Component 裡面,只能有一個匿名插槽 (Slot),但可以有多個具有名稱的 Slot。Demo:https://codesandbox.io/s/brave-surf-99h0s

帶有資料的 Slot

父組件提供樣式<template>,至於顯示的資料則由子元件提供。子元件在 slot 上綁定資料,父元件用 slot-scope 來接收,至於 slot-scope 的命名跟子元件沒有直接關聯。
Demo:https://codesandbox.io/s/brave-surf-99h0s


參考資料

深入理解vue中的slot与slot-scope


其他 Vue.js 相關文章

[blogimove-CPC-TAG=vuejs-MODE=3]

按讚加入粉絲團

延伸閱讀