如何在Vue中使用slot-創(chuàng)新互聯(lián)

這篇文章給大家介紹如何在Vue中使用slot，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

我們一直強(qiáng)調(diào)成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站對于企業(yè)的重要性,如果您也覺得重要,那么就需要我們慎重對待,選擇一個安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做，要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過程中的有力推手。專業(yè)網(wǎng)絡(luò)公司不一定是大公司,成都創(chuàng)新互聯(lián)公司作為專業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。

Vue的優(yōu)點(diǎn)

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

單個 Slot

在子組件內(nèi)使用特殊的<slot>元素就可以為這個子組件添加一個 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>如果父組件沒用插入內(nèi)容,我將作為默認(rèn)出現(xiàn)</p>\
        </slot>\
      </div>'
    });

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

  </script>

</body>
</html>

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

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

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

具名 Slot

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

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

</head>
<body>

  <div id="app">
    <child-component>
      <h3 slot="header">標(biāo)題</h3>
      <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個 <slot> 元素,其中在<div class="main">內(nèi)的<slot> 沒用使用 name 特性,它將作為默認(rèn) slot 出現(xiàn),父組件沒有使用 slot 特性的元素與內(nèi)容都將出現(xiàn)在這里.

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

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

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

關(guān)于如何在Vue中使用slot就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：如何在Vue中使用slot-創(chuàng)新互聯(lián)
當(dāng)前地址：http://m.rwnh.cn/article44/iisee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、軟件開發(fā)、自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

如何在Vue中使用slot-創(chuàng)新互聯(lián)

Vue的優(yōu)點(diǎn)