tags: Vuejs

具名插槽 ✐

若是需要多個插槽，可以在 <slot> 中使用 name attribute，定義命名的插槽，可以定義具有多個插槽的組件。

Vue.component('my-component', {
  data() {
    return {
      user: {
        name: 'Tony',
        age: 23,
      },
    }
  },
  template: `
  <div>
      <h2><slot name="title"></slot></h2>
      <p><slot name="text"></slot></p>
  </div>`,
})

接著，父組件向命名插槽提供內容，透過 <template> 與 v-slot 指令即可，v-slot 後要加上要提供分發內容的插槽名稱。

• 注意：v-slot 只能使用在 template 上。（有一種例外，後文提及）

const vm = new Vue({
  el: '#app',
  template: `
  <div id="app">
    <my-component>
      <template v-slot:title>標題</template>
      <template v-slot:text>一段文字</template>
    </my-component>
  </div>`,
})

會渲染成如下結果：

默認下，一個沒有命名的插槽會預設為具有 default 隱含名稱的插槽。

而沒有使用 v-slot 指定分發名稱的內容會被視作 default 隱含默認插槽的內容：

下方的 <p>這是默認插槽的內容</p> 沒有指定分發的命名插槽，將會被視作 default 插槽的內容：

Vue.component('my-component', {
  data() {
    return {
      user: {
        name: 'Tony',
        age: 23,
      },
    }
  },
  template: `
  <div>
      <h2><slot name="title"></slot></h2>
      <p><slot name="text"></slot></p>
      <slot></slot>
  </div>`,
})

const vm = new Vue({
  el: '#app',
  template: `
  <div id="app">
    <my-component>
      <template v-slot:title>標題</template>
      <template v-slot:text>一段文字</template>
      <p>這是默認插槽的內容</p>
    </my-component>
  </div>`,
})

會渲染成如下結果：

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

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

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

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

參考資料：

1. Vuejs.org 2.x