函數，通過這種方式實現了默認值，可以讓我們調用時更靈活，更方便。 組件，也應該有默認模板，當我們調用一個組件，啥都不傳時，顯示我們定義的默認模板，當我們傳了自定義模板時，就應該使用我們自定義的模板，來替換默認模板，那么，今天說的slot，其實它就是實現的這個功能，下面以類似官方的例子進行解釋。 例如，現在有一個子組件 child，代碼如下： ~~~ <div> <h2>我是子組件的標題</h2> <slot> <p>當父組件調用我時，沒有傳自定義內容時，我就會顯示了，如果傳了自定義內容，我就不顯示了。也就是說我是默認的文案！</p> </slot> </div> ~~~ 我們在父組件調用時，可以分為兩種情況，第一種是不傳自定義內容，第二種是傳入自定義內容。 第一種不傳自定義內容： ~~~ <div> <h1>我是父組件的標題</h1> <child></child> </div> ~~~ 渲染結果： ~~~ <div> <h1>我是父組件的標題</h1> <div> <h2>我是子組件的標題</h2> <p>當父組件調用我時，沒有傳自定義內容時，我就會顯示了，如果傳了自定義內容，我就不顯示了。</p> </div> </div> ~~~ 第二種傳入自定義內容： ~~~ <div> <h1>我是父組件的標題</h1> <child> <p>我是傳入子組件的一個參數，我會覆蓋掉默認文案！</p> </child> </div> ~~~ 通過上面，基本上就能理解了，slot標簽中的內容，就是默認內容，當調用子組件沒有寫入其他內容時，就會把子組件中的slot內容，默認顯示出來；如果寫入了其他內容，就會用寫入的內容，替換掉slot中的內容，所以，我把它理解為默認模板。 但是可以看到，這種方式過于粗暴，并且只能定義一塊默認內容，不是很方便，所以官方說了，slot還提供了一個具名功能，意思就是，在子組件定義slot時，加個標識，在父組件調用，自定義內容時，也加上標識，這樣就實現了可以在任意地方定義默認內容。 假設子組件依然叫child，代碼如下： ~~~ <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> ~~~ 第一種不傳自定義內容： ~~~ <div> <child></child> </div> ~~~ 渲染結果： ~~~ <div> <div class="container"> <header> <h1>默認header</h1> </header> <main> <p>默認main</p> </main> <footer> <p>默認footer</p> </footer> </div> </div> ~~~ 第二種傳入自定義內容（具名的slot）： ~~~ <div> <child> <h1 slot='header'>自定義標題</h1> <p slot='footer'>自定義底部</p> <p>自定義main</p> </child> </div> ~~~ 渲染結果： ~~~ <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中，就實現了多個地方定義默認內容。 渲染出來的結果是不會含有slot標簽的，slot都會替換成它里面的內容（HTML），如果有具名的slot就替換成具名的slot，這就是slot，成為分發內容，剛開始接觸會比較陌生，實際上稍微變一下理解，一下就懂了。 那么實戰中有什么作用呢？