tags: Vuejs

<slot> 是什麼？ ✐

Vue 中的 <slot> 是 Vue 內置的組件 build-in component 的其中一種組件，靈感來源於 web component，是一個 content distribution API。透過 <slot> 提供的保留空間，我們可以顯示從一個組件傳遞到另一個組件的內容，該內容可以是數據、HTML 元素（或任何模板代碼內容），而 <slot> 元素作為承載內容分發的出口，則會被該分發內容 替換取代。

<slot> 和 props 可以做到在子組件中呈現內容，明顯的差距之一是 <slot> 可以插入 HTML element 而不必擔心 XSS 問題。

<slot> 簡單的使用方式如下：

假如今天我們想要做一個組件，其文字內容是透過 <slot> 分發：

Vue.component('my-comonent', {
  template: `<button><slot></slot></button>`
})

const vm = new Vue({
  el: '#app',
  data: {
    text: 'BUTTON'
  },
  template: `<div id="app"><my-comonent>{{ text }}</my-comonent></div>`,
})

my-comonent 的 slot 將被分發的 {{ text }} 取代，按鈕會呈現如下內容。

簡單來說：

slot 內置組件將被設置在要有插槽的 子組件 上，而使用有插槽組件的 父組件，便可以寫入要取代 <slot> 的內容。

注意：若是沒有在子組件中使用 <slot>，父組件傳入子組件的內容將會被拋棄，如下方內容：

Vue.component('my-comonent', {
  template: `<button></button>`
})

const vm = new Vue({
  el: '#app',
  data: {
    text: 'BUTTON'
  },
  template: `<div id="app"><my-comonent>{{ text }}</my-comonent></div>`,
})

這次 my-comonent 中沒有寫入要作為內容分發的 <slot>，按鈕不會呈現文字內容，該文字 被拋棄。

編譯 scope

插槽中使用的數據內容 scope 為所處模板的 scope，也就是當下模板 instance 的 property。

Vue.component('my-comonent', {
  props: ['url'],
  template: `<button><slot></slot></button>`
})

const vm = new Vue({
  el: '#app',
  data: {
    text: 'BUTTON',
  },
  template: `<div id="app"><my-comonent url="xxx">{{ text }}</my-comonent></div>`,
})

以上述範例來說，插槽可以訪問 vm instance scope，不能訪問 my-comonent scope 內容 url。

總結來說：

• 父級模板 的內容都是在 父級 scope 編譯的，所以上述範例中插槽可以訪問 父級 scope。
• 子級模板 的內容都是在 子級 scope 編譯的，內容可以訪問 子級作用域 scope。

後備內容

可以為插槽準備 後備內容，當想要設置一個 預設默認值 時，該功能很有用。

Vue.component('my-comonent', {
  template: `<button><slot>Default</slot></button>`
})

const vm = new Vue({
  el: '#app',
  data: {
    text: 'BUTTON'
  },
  template: `<div id="app"><my-comonent></my-comonent></div>`,
})

按鈕由於提供了後備內容，插槽沒傳入內容會呈現如下的默認值：

以上為此次內容，感謝看到這裡的你，我們明天見。

若是文中有任何錯誤、錯字、想討論的內容，歡迎各位大大不吝鞭笞指正、交流分享，筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github：https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人：每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根，似乎就能茁壯成長 - RM

參考資料：

1. Vuejs.org 2.x
2. Vue Slots | Understanding of Slots in Vuejs | Learn Vuejs Slots