這篇文章主要介紹“vue使用slot的場景是什么”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue使用slot的場景是什么”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站建設(shè)、網(wǎng)站制作與策劃設(shè)計,浦口網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:浦口等地區(qū)。浦口做網(wǎng)站價格咨詢:028-86922220

使用場景：通過slot（插槽）可以讓用戶可以拓展組件，去更好地復(fù)用組件和對其做定制化處理；如果父組件在使用到一個復(fù)用組件的時候，獲取這個組件在不同的地方有少量的更改，如果去重寫組件是一件不明智的事情。通過slot插槽向組件內(nèi)部指定位置傳遞內(nèi)容，完成這個復(fù)用組件在不同場景的應(yīng)用；比如布局組件、表格列、下拉選、彈框顯示內(nèi)容等。

slot是什么

在HTML中 slot 元素 ，作為 Web Components 技術(shù)套件的一部分，是Web組件內(nèi)的一個占位符

該占位符可以在后期使用自己的標記語言填充

舉個栗子

  Slot template


  1


  2

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在組件模板中占好了位置，當(dāng)使用該組件標簽時候，組件標簽里面的內(nèi)容就會自動填坑（替換組件模板中slot位置），作為承載分發(fā)內(nèi)容的出口

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

使用場景

通過插槽可以讓用戶可以拓展組件，去更好地復(fù)用組件和對其做定制化處理

如果父組件在使用到一個復(fù)用組件的時候，獲取這個組件在不同的地方有少量的更改，如果去重寫組件是一件不明智的事情

通過slot插槽向組件內(nèi)部指定位置傳遞內(nèi)容，完成這個復(fù)用組件在不同場景的應(yīng)用

比如布局組件、表格列、下拉選、彈框顯示內(nèi)容等

分類

slot可以分來以下三種：

• 默認插槽

• 具名插槽

• 作用域插槽

默認插槽

子組件用標簽來確定渲染的位置，標簽里面可以放DOM結(jié)構(gòu)，當(dāng)父組件使用的時候沒有往插槽傳入內(nèi)容，標簽內(nèi)DOM結(jié)構(gòu)就會顯示在頁面

父組件在使用的時候，直接在子組件的標簽內(nèi)寫入內(nèi)容即可

子組件Child.vue

父組件

  
默認插槽
  

具名插槽

子組件用name屬性來表示插槽的名字，不傳為默認插槽

父組件中在使用時在默認插槽的基礎(chǔ)上加上slot屬性，值為子組件插槽name屬性值

子組件Child.vue

父組件

    具名插槽
    
    內(nèi)容...

作用域插槽

子組件在作用域上綁定屬性來將子組件的信息傳給父組件使用，這些屬性會被掛在父組件v-slot接受的對象上

父組件中在使用時通過v-slot:（簡寫：#）獲取子組件的信息，在內(nèi)容中使用

子組件Child.vue

父組件

 
    
    
      來??組件數(shù)據(jù)：{{slotProps.testProps}}
    
    
      來??組件數(shù)據(jù)：{{slotProps.testProps}}
    

小結(jié)：

• v-slot屬性只能在