本文題材來自：https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9
<slot></slot>標簽，簡單來說就是占位符，它會幫你占好位置，等你需要的時候直接將html傳入，它會幫你顯示出來。
也有人說：props可以將數據從父組件傳入子組件，slot可以將html從父組件傳入子組件。那么如何實現呢？
單個插槽：
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript" src="vue.min.js"></script> </head> <body> <div id="app"> <h1>我是父組件的標題</h1> <my-component> <p>這是一些初始內容</p> <p>這是更多的初始內容</p> </my-component> </div> <script type="text/javascript"> Vue.component('my-component', { // 有效，因為是在正確的作用域內 template: '<div>/ <h2>我是子組件的標題</h2>/ <slot>只有在沒有要分發的內容時才會顯示。</slot>/ </div>', data: function () { return { } } }); new Vue({ el:'#app', data:{ msg:'你好啊' } }) </script> </body></html>組件中的模板中寫入slot標簽，在父級調用子組件的時候傳入html即可。
具名插槽：
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript" src="vue.min.js"></script> </head> <body> <div id="app"> <my-component> <h1 slot="header">這里可能是一個頁面標題</h1> <p>主要內容的一個段落。</p> <p>另一個主要段落。</p> <p slot="footer">這里有一些聯系信息</p> </my-component> </div> <script type="text/javascript"> Vue.component('my-component', { // 有效，因為是在正確的作用域內 template: '<div class="container">/ <header>/ <slot name="header"></slot>/ </header>/ <main>/ <slot></slot>/ </main>/ <footer>/ <slot name="footer"></slot>/ </footer>/ </div>', data: function () { return { } } }); new Vue({ el:'#app', data:{ msg:'你好啊' } }) </script> </body></html>具名插槽，顧名思義當有多個slot標簽時，你需要給他們起個自己的名字，在父組件調用時需要slot="內部的對應名字"，當存在沒有命名的slot標簽時，父級組件傳入的默認html代碼將全部輸出在無名的slot標簽中。
新聞熱點
疑難解答
圖片精選
