Vue slot用法(小結(jié))

更新時(shí)間：2018年10月22日 09:02:19 作者：一葉扁舟丶

這篇文章主要介紹了Vue slot用法(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

之前看官方文檔，由于自己理解的偏差，不知道slot是干嘛的，看到小標(biāo)題，使用Slot分發(fā)內(nèi)容，就以為是要往下派發(fā)內(nèi)容。然后就沒(méi)有理解插槽的概念。其實(shí)說(shuō)白了，使用slot就是先圈一塊地，將來(lái)可能種花種菜，也有可能在這塊地上建房子。然而slot可以以一當(dāng)十，可以插入很多東西。不知明白否？

由于項(xiàng)目經(jīng)驗(yàn)有限，這篇我就先跟著官網(wǎng)的知識(shí)點(diǎn)走，當(dāng)然會(huì)加入自己的部分項(xiàng)目代碼。

關(guān)于slot是這樣說(shuō)的，

除非子組件模板包含至少一個(gè) <slot> 插口，否則父組件的內(nèi)容將會(huì)被丟棄。當(dāng)子組件模板只有一個(gè)沒(méi)有屬性的 slot 時(shí)，父組件整個(gè)內(nèi)容片段將插入到 slot 所在的 DOM 位置，并替換掉 slot 標(biāo)簽本身。

最初在 <slot> 標(biāo)簽中的任何內(nèi)容都被視為備用內(nèi)容。備用內(nèi)容在子組件的作用域內(nèi)編譯，并且只有在宿主元素為空，且沒(méi)有要插入的內(nèi)容時(shí)才顯示備用內(nèi)容。

單個(gè) Slot

在子組件內(nèi)使用特殊的<slot>元素就可以為這個(gè)子組件添加一個(gè) slot (插槽),在父組件模板里,插入在子組件標(biāo)簽內(nèi)的所有內(nèi)容將替代子組件的<slot>標(biāo)簽及它的內(nèi)容.示例代碼如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>

</head>
<body>

  <div id="app">
    <child-component>
      <p>分發(fā)的內(nèi)容</p>
      <p>更多分發(fā)的內(nèi)容</p>
    </child-component>
  </div>
  
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

  <script>

    Vue.component('child-component', {
      template: '\
      <div>\
        <slot>\
          <p>如果父組件沒(méi)用插入內(nèi)容,我將作為默認(rèn)出現(xiàn)</p>\
        </slot>\
      </div>'
    });

    var app = new Vue({
      el: '#app'
    })

  </script>

</body>
</html>

子組件 child-component 的模板內(nèi)定義一個(gè) <slot> 元素,并且用一個(gè) <p> 作為默認(rèn)的內(nèi)容,在父組件沒(méi)有使用 slot 時(shí),會(huì)渲染這段默認(rèn)的文本;如果寫(xiě)入了 slot ,那就會(huì)替換整個(gè) <slot>.所以上列渲染后的結(jié)果為:

<div id="app">
   <div>
    <p>分發(fā)的內(nèi)容</p>
    <p>更多分發(fā)的內(nèi)容</p>
  </div>
</div>

注意:子組件<slot>內(nèi)的備用內(nèi)容,它的作用域時(shí)子組件本身.

具名 Slot

給 <slot> 元素指定一個(gè) name 后可以分發(fā)多個(gè)內(nèi)容,具名 Slot 可以與單個(gè) Slot 共存,例如下面的示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>

</head>
<body>

  <div id="app">
    <child-component>
      <h2 slot="header">標(biāo)題</h2>
      <p>正文內(nèi)容</p>
      <p>更多正文內(nèi)容</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>

子組件內(nèi)聲明了3個(gè) <slot> 元素,其中在<div class="main">內(nèi)的<slot> 沒(méi)用使用 name 特性,它將作為默認(rèn) slot 出現(xiàn),父組件沒(méi)有使用 slot 特性的元素與內(nèi)容都將出現(xiàn)在這里.

如果沒(méi)有指定默認(rèn)的匿名 slot, 父組件內(nèi)多余的內(nèi)容片段都將被拋棄.

上例最終渲染后的結(jié)果為:

<div id="app">
    <div class="container">
      <div class="header">
        <h2>標(biāo)題</h2>
      </div>
      <div class="main">
        <p>正文內(nèi)容</p>
        <p>更多的正文內(nèi)容</p>
      </div>
      <div class="footer">
        <div>底部信息</div>
      </div>
    </div>
  </div>

在組合使用組件時(shí),內(nèi)容分發(fā)API至關(guān)重要.

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: