Vue slot的用法

Tybyq發表於2018-12-12
Vue

之前看官方文件，由於自己理解的偏差，不知道slot是幹嘛的，看到小標題，使用Slot分發內容，就以為 是要往下派發內容。然後就沒有理解插槽的概念。其實說白了，使用slot就是先圈一塊地，將來可能種花種菜，也有可能在這塊地上建房子。然而slot可以以一當十，可以插入很多東西。不知明白否？

由於專案經驗有限，這篇我就先跟著官網的知識點走，當然會加入自己的部分專案程式碼。

關於slot是這樣說的，

除非子元件模板包含至少一個 <slot> 插口，否則父元件的內容將會被丟棄。當子元件模板只有一個沒有屬性的 slot 時，父元件整個內容片段將插入到 slot 所在的 DOM 位置，並替換掉 slot 標籤本身。

最初在 <slot> 標籤中的任何內容都被視為備用內容。備用內容在子元件的作用域內編譯，並且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。

單個 Slot

在子元件內使用特殊的<slot>元素就可以為這個子元件新增一個 slot (插槽),在父元件模板裡,插入在子元件標籤內的所有內容將替代子元件的<slot>標籤及它的內容.示例程式碼如下: 

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>示例</title> </head><body> 
  <div id="app">    <child-component>      <p>分發的內容</p>      <p>更多分發的內容</p>    </child-component>  </div>   
  <script src="
  <script> 
    Vue.component('child-component', {
      template: '\
      <div>\
        <slot>\
          <p>如果父元件沒用插入內容,我將作為預設出現</p>\
        </slot>\
      </div>'
    });
 
    var app = new Vue({
      el: '#app'
    })
 
  </script> </body></html>

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案影片進群免費領取。

子元件 child-component 的模板內定義一個 <slot> 元素,並且用一個 <p> 作為預設的內容,在父元件沒有使用 slot 時,會渲染這段預設的文字;如果寫入了 slot ,那就會替換整個 <slot>.所以上列渲染後的結果為: 

<div id="app">
   <div>
    <p>分發的內容</p>
    <p>更多分發的內容</p>
  </div></div>

注意:子元件<slot>內的備用內容,它的作用域時子元件本身.

具名 Slot

給 <slot> 元素指定一個 name 後可以分發多個內容,具名 Slot 可以與單個 Slot 共存,例如下面的示例: 

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>示例</title> </head><body> 
  <div id="app">    <child-component>      <h2 slot="header">標題</h2>      <p>正文內容</p>      <p>更多正文內容</p>      <div slot="footer">底部資訊</div>    </child-component>  </div>   
  <script src="
  <script> 
    Vue.component('child-component', {
      template: '\
      <div class="component">\
        <div class="header">\
          <slot name="header"></slot>\
        </div>\
        <div class="main">\
          <slot></slot>\
        </div>\
        <div class="footer">\
          <slot name="footer"></slot>\
        </div>\
      </div>'
    });
 
    var app = new Vue({
      el: '#app'
    })
 
  </script> </body></html>

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案影片進群免費領取。

子元件內宣告瞭3個 <slot> 元素,其中在<div class="main">內的<slot> 沒用使用 name 特性,它將作為預設 slot 出現,父元件沒有使用 slot 特性的元素與內容都將出現在這裡.

如果沒有指定預設的匿名 slot, 父元件內多餘的內容片段都將被拋棄.

上例最終渲染後的結果為: 

div id="app">    <div class="container">
      <div class="header">
        <h2>標題</h2>
      </div>
      <div class="main">
        <p>正文內容</p>
        <p>更多的正文內容</p>
      </div>
      <div class="footer">
        <div>底部資訊</div>
      </div>
    </div>
  </div>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/31557424/viewspace-2285013/，如需轉載，請註明出處，否則將追究法律責任。

相關文章