vue什麼情況用slot

使用場景：透過slot（插槽）可以讓使用者可以拓展元件，去更好地重複使用元件和對其做客製化處理；如果父元件在使用到一個複用元件的時候，取得這個組件在不同的地方有少量的更改，如果去重寫組件是一件不明智的事情。透過slot插槽向元件內部指定位置傳遞內容，完成這個複用元件在不同場景的應用；例如佈局元件、表格列、下拉選、彈框顯示內容等。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

slot是什麼

---

在HTML中slot 元素，作為Web Components 技術套件的一部分，是Web元件內的一個佔位符

該佔位符可以在後期使用自己的標記語言填入

舉個栗子

<template id="element-details-template">
  <slot name="element-name">Slot template</slot>
</template>
<element-details>
  <span slot="element-name">1</span>
</element-details>
<element-details>
  <span slot="element-name">2</span>
</element-details>

template不會展示到頁面中，需要用先取得它的引用，然後加入到DOM中，

customElements.define('element-details',
  class extends HTMLElement {
    constructor() {
      super();
      const template = document
        .getElementById('element-details-template')
        .content;
      const shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(template.cloneNode(true));
  }
})

在Vue中的概念也是如此

Slot 藝名插槽，花名“佔坑”，我們可以理解為solt在組件模板中佔好了位置，當使用該組件標籤時候，組件標籤裡面的內容就會自動填坑（替換組件模板中slot位置），作為承載分發內容的出口

可以將其類比為插卡式的FC遊戲機，遊戲機暴露卡槽（插槽）讓用戶插入不同的遊戲磁條（自定義內容）

使用場景

---

透過插槽可以讓使用者可以拓展元件，去更好地複用元件和對其做客製化處理

如果父元件在使用到一個複用元件的時候，取得這個元件在不同的地方有少量的更改，如果去重寫元件是一件不明智的事情

通過slot插槽向元件內部指定位置傳遞內容，完成這個複用元件在不同場景的應用

例如佈局元件、表格列、下拉選、彈框顯示內容等

#分類

---

slot可以分以下三種：

• #預設插槽

• 有名插槽

• 作用域插槽

#預設插槽

子元件用58cb293b8600657fad49ec2c8d37b472標籤來決定渲染的位置，標籤裡面可以放DOM結構，當父元件使用的時候沒有往插槽傳入內容，標籤內DOM結構就會顯示在頁面

父元件在使用的時候，直接在子元件的標籤內寫入內容即可

子元件Child.vue

<template>
    <slot>
      <p>插槽后备的内容</p>
    </slot>
</template>

父元件

<Child>
  <div>默认插槽</div>  
</Child>

具名插槽

子元件用name屬性來表示插槽的名字，不傳為預設插槽

父元件中使用時在預設插槽的基礎上加上slot屬性，值為子元件插槽name屬性值

子元件Child.vue

<template>
    <slot>插槽后备的内容</slot>
  <slot name="content">插槽后备的内容</slot>
</template>

父元件

<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

作用域插槽

子元件在作用域上綁定屬性來將子元件的資訊傳給父元件使用，這些屬性會被掛在父元件v-slot接受的物件上

父元件中在使用時透過v-slot:（簡寫：#）取得子元件的信息，在內容中使用

子元件Child.vue

<template> 
  <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
    </slot>
</template>

父元件

<child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
    <template #default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
</child>

小結：

• v-slot屬性只能在&lt ;template>上使用，但只有預設插槽時可以在元件標籤上使用

• 預設插槽名為default，可以省略default直接寫v-slot

• #縮寫為#時不能不寫參數，寫成#default

• 可以透過解構取得v-slot={user}，也可以重新命名v-slot="{user: newName}"與定義預設值v-slot="{user = '預設值'}"

#相關推薦：vue.js影片教學

以上是vue什麼情況用slot的詳細內容。更多資訊請關注PHP中文網其他相關文章！