iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
0
自我挑戰組

每天來點 Vue.js 吧系列 第 27

Vue slot: 具名插槽

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

上一篇
Vue slot:編譯作用域、後備內容
下一篇
Vue slot:作用域插槽、具名插槽的縮寫
系列文
每天來點 Vue.js 吧30

尚未有邦友留言

立即登入留言