vue官方文檔中關(guān)于slot插槽的說明很簡短，語言又寫的很凝練,這就有可能造成初次接觸插槽的開發(fā)者容易產(chǎn)生“算了吧，回頭再學(xué)，反正已經(jīng)可以寫基礎(chǔ)組件了”的想法坠七，于是就關(guān)閉了vue的說明文檔水醋。

一、slot的作用

Q: 假如父組件需要在子組件內(nèi)放一些DOM元素彪置，那么這些DOM是顯示呢還是不顯示呢拄踪？

默認(rèn)情況下是不會顯示的，如下圖所示拳魁，頁面并沒有顯示父組件增加的<span>我是魔鬼</span> 元素內(nèi)容惶桐。那么我執(zhí)意要加DOM元素到子組件上該怎么實現(xiàn)呢？這就用到了slot插槽潘懊，使用slot這個標(biāo)簽可以將父組件放在子組件的內(nèi)容姚糊，放到它想顯示的地方

<div id="app">  
  <children>  
    <span>我是魔鬼</span>  
    <!--上面這行不會顯示-->  
  </children>  
</div>  
<script>  
  var vm = new Vue({  
      el: '#app',  
      components: {  
         children: {   
         template: "<h1>我是子組件</h1>"  
       }  
     }  
  });  
</script>  

二、簡單理解slot

通俗易懂的講授舟，slot具有“占坑”的作用救恨，在子組件占好了位置，那父組件使用該子組件標(biāo)簽時释树，新添加的DOM元素就會自動填到這個坑里面

三肠槽、單個slot

我們將上面的代碼改一改 , 給child組件添加slot插槽，那么父組件的添加的DOM元素就填充到這個slot插槽里面了

注意：如果有多個DOM元素奢啥，會一起插入到<slot></slot>這個標(biāo)簽內(nèi)

<div id="app">  
  <children>  
    <span>我是魔鬼</span>  
    <!--上面這行會顯示在 “我是子組件” 數(shù)據(jù)后面-->  
  </children>  
</div>  
<script>  
  var vm = new Vue({  
      el: '#app',  
      components: {  
         children: {   
         template: "<h1>我是子組件</h1><slot></slot>"  
       }  
     }  
  });  
</script>  

四秸仙、具名插槽

現(xiàn)在我們需要將父組件添加的HTML標(biāo)簽放在子組件里的不同位置。具名插槽實現(xiàn)：先在子組件對應(yīng)分發(fā)slot標(biāo)簽里桩盲，添加name=”name名” 屬性寂纪，其次父組件在要分發(fā)的標(biāo)簽里添加 slot=”name名” 屬性，然后就會將對應(yīng)的標(biāo)簽放在對應(yīng)的位置了赌结。

簡單理解就是：給子組件占的每一個坑取名捞蛋，將父組件添加的HTML元素添加到指定名字的坑，就實現(xiàn)了分發(fā)內(nèi)容在不同位置顯示

【Child組件模板】

<template>
  <div>
    <slot name="header"></slot>
    <h1>我是子組件</h1>
    <slot name="footer"></slot>
  </div>
</template>

【父組件引用Child組件】

<Child>
  <span slot="header">我是header</span>
  <span slot="footer">我是footer</span>
</Child>

五姑曙、編輯作用域

父組件模板的內(nèi)容在父組件作用域內(nèi)編譯襟交；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯

【Child組件模板】

<template>
  <div>
    <slot name="header"></slot>
    <h1>{{msg}}</h1>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: '我是子組件里面的內(nèi)容'
    }
  }
}
</script>

【父組件引用Child組件】

<template>
  <Child>
    <span slot="header">我是header</span>
    <h1>{{msg}}</h1>
    <span slot="footer">我是footer</span>
  </Child>
</template>
<script>
export default {
  data() {
    return {
      msg: '我是父組件的內(nèi)容'
    }
  }
}
</script>

六迈倍、解構(gòu)slot-scope

在子組件中插槽中通過：data綁定了數(shù)據(jù)伤靠，父組件可以通過slot-scope="name"來取得子組件作用域插槽：data綁定的數(shù)據(jù)，name的名稱可以隨便取啼染，用來定義對象來代替取到的data數(shù)據(jù)宴合。

【Child組件模板】

<template>
  <div>
    <slot :data="data"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: ['Neinei','Laoba','Demi','Feiyan']
    }
  }
}
</script>

【父組件引用Child組件】

  <template>
    <!-- 循環(huán)數(shù)據(jù)列表 -->
    <Child>
      <div slot-scope="msg">
        <span v-for="item in msg.data">{{item}} </span>
      </div>
    </Child>

    <!-- 直接顯示數(shù)據(jù) -->
    <Child>
      <div slot-scope="msg">
        <span>{{msg.data}} </span>
      </div>
    </Child>

    <!-- 不使用其提供的數(shù)據(jù), 作用域插槽退變成匿名插槽 -->
    <Child>
      <div>我是插槽</div>
    </Child>
  </template>

文章每周持續(xù)更新，可以微信搜索「 前端大集錦 」第一時間閱讀迹鹅，回復(fù)【視頻】【書籍】領(lǐng)取200G視頻資料和30本PDF書籍資料