Vue中的slot使用插槽分發內容的方法，vueslot

最後更新：2018-03-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文題材來自：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標籤中。

範圍插槽

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <script type="text/javascript" src="vue.min.js"></script>  </head>  <body>    <div id="app">       <!-- 在父級中，具有特殊特性 slot-scope 的 <template> 元素必須存在，表示它是範圍插槽的模板。slot-scope 的值將被用作一個臨時變數名，此變數接收從子組件傳遞過來的 prop 對象： -->       <child>        <template scope="props">         <span>hello from parent</span><br>         <span>{{ props.text }}</span>        </template>      </child>    </div>    <script type="text/javascript">      // 在子組件中，只需將資料傳遞到插槽，就像你將 prop 傳遞給組件一樣：      Vue.component('child',{        template:'<ul>' +              '<slot text="hello from child"></slot>' +             '</ul>',        data:function(){         return {         }        },      });      new Vue({        el:'#app',        data:{          msg:'你好啊'        }      })    </script>  </body></html>

範圍插槽是一種特殊類型的插槽，用作一個 (能被傳遞資料的) 可重用模板，來代替已經渲染好的元素。

其實就是相當於，在父組件中可以擷取到子組件傳遞出來的props對象，從而渲染到父組件上。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More