目的

• Vue文檔中解釋: 這是Vue實(shí)現(xiàn)了一套內(nèi)容分發(fā)的API,<slot> 元素作為承載分發(fā)內(nèi)容的出口
• 我理解是: 插槽機(jī)制完成了由父組件制定子組件內(nèi)容的又一種方式(也可以通過傳遞props來制定),而slot用來指定父組件傳遞的內(nèi)容應(yīng)該放在何處
• 兩個機(jī)制相比:
  props通過傳遞參數(shù),子組件內(nèi)部需要提前定義好內(nèi)容生成的邏輯，接到對應(yīng)參數(shù)后，由子組件內(nèi)部來根據(jù)參數(shù)生成內(nèi)容;
  而slot直接傳遞需要展示的內(nèi)容, 子組件只負(fù)責(zé)管理內(nèi)容的具體展示位置;
• 應(yīng)用場景: 根據(jù)之前的對比，可以看出，兩者都是由父組件指定子組件內(nèi)容的方式，區(qū)別是：
  使用slot時：子組件并不需要知道具體內(nèi)容是什么
  使用props時： 具體的內(nèi)容是由子組件提前定義好的
  因此，slot適用于靈活且沒有限制的自定義內(nèi)容，如element-ui中的自定義表格內(nèi)容

使用

基本用法

使用slot時首先捋清父子組件與傳遞內(nèi)容的關(guān)系 :

1. 父組件中指定傳遞的內(nèi)容 放在子組件標(biāo)簽之間
   
2. 子組件使用<slot></slot>來指定接受的內(nèi)容放在何處
   

• 簡單的demo :

  
  

編譯作用域

• Vue文檔: 父級模板里的所有內(nèi)容都是在父級作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的
• 即是說: 寫在父組件(app)中的變量或方法引用都只能引用父組件(app)中存在的數(shù)據(jù),即使該變量會以插槽的方式出現(xiàn)在子組件(test-comp)的內(nèi)部

<div id="app">
  <test-comp>
    <p >{{this_data}}</p>
    <p>{{sub_data}}</p>    // 該數(shù)據(jù)為子組件數(shù)據(jù)，訪問不到,控制臺會報錯
  </test-comp>
</div>

<template id="test">
  <div>
    <slot></slot>
    <p>p in sub</p>
  </div>
</template>

Vue.component('test-comp',{
  template: '#test',
  data () {
    return {
      sub_data: 'data store in sub_com'
    }
  }
})

new Vue({
  el: "#app",
  data: {
    this_data: 'data store in root'
  }
})

上面這個例子會出現(xiàn)報錯,原因是sub_data是寫在父組件模板上的數(shù)據(jù)引用,因此不可能訪問到子組件中定義的數(shù)據(jù)sub_data

插槽后備內(nèi)容

• 不贅述，可類比video標(biāo)簽的替換內(nèi)容

<video>video is not aviailable in your browser ... </video>

指定對應(yīng)的具名插槽

• 當(dāng)出現(xiàn)多個需要分發(fā)的內(nèi)容時，可以為插槽命名，并在子組件中根據(jù)不同的名稱進(jìn)行分開管理
• 使用<template v-slot:xxx />來指定我是<slot name="xxx">插槽的內(nèi)容

插槽 Prop

• 上面的引用方式無法訪問到子組件中的數(shù)據(jù),這對于一些需要父子組件數(shù)據(jù)交互來定義模板的情況來說會很不適用,Vue通過為插槽提供Prop的方式解決了這個問題
• 雖然該特性被稱為 prop,但是相對于我們通常使用的用來給子組件傳參的 prop 還是很有區(qū)別的 :
  • prop 提供了一個父組件傳參給子組件的方式,
  • 而插槽prop則可以讓父組件中的插槽訪問子組件的數(shù)據(jù)(可以理解為子組件向父組件傳參,但只傳遞到了slot內(nèi)部)

<div id="app">                     // 父組件
  <sub-comp>
    <template v-slot:default="DataFromSub">    // 將傳遞的參數(shù)接收并重命名
      {{DataFromSub.data}}  //  展示子組件傳遞的數(shù)據(jù)
      <br>
      {{DataFromSub.user}}
    </template>
  </sub-comp>
</div>

<template id="sub">               // 子組件
  <section id="sub_comp">
    <p>this is sub_component</p>
    <slot :data="subData" :user="user"></slot> // 向slot中的內(nèi)容傳遞參數(shù)
  </section>
</template>

Vue.component('sub-comp', {               // 子組件
  template:'#sub', 
  data() {
    return {
      subData: 'sub_data',
      user: 'admin'
    }
  }
})
var vm = new Vue({                        // 父組件
  el : "#app"
})