Vue slot的用法

時間 2019-11-13

標籤 vue slot 用法简体版

原文原文鏈接

以前看官方文檔，因爲本身理解的誤差，不知道slot是幹嗎的，看到小標題，使用Slot分發內容，就覺得是要往下派發內容。而後就沒有理解插槽的概念。其實說白了，使用slot就是先圈一塊地，未來可能種花種菜，也有可能在這塊地上建房子。然而slot能夠以一當十，能夠插入不少東西。不知明白否？html

因爲項目經驗有限，這篇我就先跟着官網的知識點走，固然會加入本身的部分項目代碼。前端

關於slot是這樣說的，vue

除非子組件模板包含至少一個 <slot> 插口，不然父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的 slot 時，父組件整個內容片斷將插入到 slot 所在的 DOM 位置，並替換掉 slot 標籤自己。app

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

單個 Slotcode

在子組件內使用特殊的<slot>元素就能夠爲這個子組件添加一個 slot (插槽),在父組件模板裏,插入在子組件標籤內的全部內容將替代子組件的<slot>標籤及它的內容.示例代碼以下:component

<!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="https://unpkg.com/vue/dist/vue.min.js"></script>
 
  <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>.因此上列渲染後的結果爲:htm

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

注意:子組件<slot>內的備用內容,它的做用域時子組件自己.ip

具名 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="https://unpkg.com/vue/dist/vue.min.js"></script>
 
  <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>

在組合使用組件時,內容分發API相當重要.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。