本篇文章參考賽冷思的個人博客

1.函數默認傳參

在我們寫js函數我們的可能會給他們一個默認的參數，寫法是

function show(age,name){
  var age = age || 20;
  var name = name || 張三;

  console.log(age,name);     
}

show(); // 20,張三

show(18,"命名") // 18,明明

如果用戶不傳入參數，那麽會輸出默認值，如果用戶傳入，會輸出傳入的值，這種寫法很靈活

vue中的組件，也可以有默認的模板，當我們調用一個組件，啥都不傳時，顯示我們定義的默認模板，當我們傳了自定義模板時，就應該使用我們自定義的模板，來替換默認模板，那麽，今天說的slot，其實它就是實現的這個功能，可以理解為函數的傳參。下面以類似官方的例子進行解釋。

現在有個一個模板 child

<div>
      <h2>我是子組件的標題</h2>
      <slot>
        <p>當父組件調用我時，沒有傳自定義內容時，我就會顯示了，如果傳了自定義內容，我就不顯示了。</p>
      </slot>
</div>

slot中的就是默認參數，如果我們不傳入參數

<child></child>就會被渲染成

<div>
      <h2>我是子組件的標題</h2>
        <p>當父組件調用我時，沒有傳自定義內容時，我就會顯示了，如果傳了自定義內容，我就不顯示了。</p>
</div>
 

如果我們傳入參數

<child><p>這是我自定義的內容，覆蓋子組件slot中的內容</p></child>渲染為

    <div>
          <h2>我是子組件的標題</h2>
          <p>這是我自定義的內容，覆蓋子組件slot中的內容</p>
    </div>     

我們可以看到child中的元素會把模板中的內容改變,就好像我們傳入的參數一樣，所有理解為默認模板

但是可以看到，這種方式過於粗暴，並且只能定義一塊默認內容，不是很方便，所以官方說了，slot還提供了一個具名功能，意思就是，在子組件定義slot時，加個標識，在父組件調用，自定義內容時，也加上標識，這樣就實現了可以在任意地方定義默認內容，下面有請具名slot，其實就是給slot起個名字

<div class="container">
      <header>
        <slot name="header"><h1>默認header</h1></slot>
      </header>
      <main>
        <slot><p>默認main</p></slot>
      </main>
      <footer>
        <slot name="footer"><p>默認footer</p></slot>
      </footer>
</div>

上面的是子組件，我們給每一個slot一個name屬性，如果是默認值的話，name是沒有什麽作用的，在傳參時，我們可以讓child中的元素，加上slot屬性

<div>
      <child>
          <h1 slot=‘header‘>自定義標題</h1>
          <p slot=‘footer‘>自定義底部</p>
          <p>自定義main</p>
      </child>
</div>

所以，我們的child最後就被渲染成了

<div>
      <div class="container">
          <header>
            <h1>自定義標題</h1>
          </header>
          <main>
            <p>自定義main</p>
          </main>
          <footer>
            <p>自定義底部</p>
          </footer>
    </div>
</div>

在子組件定義slot加個name屬性值，在父組件調用時，加上slot屬性，值就是子組件中slot的name屬性值，這樣就會自動定位到對應的slot中，就實現了多個地方定義默認內容。

vue中的插槽slot理解