vue中slot與slot-scope怎么使用

本篇內(nèi)容介紹了“vue中slot與slot-scope怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、皇姑網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、購物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為皇姑等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

單個(gè)插槽 | 默認(rèn)插槽 | 匿名插槽

首先是單個(gè)插槽，單個(gè)插槽是vue的官方叫法，但是其實(shí)也可以叫它默認(rèn)插槽，或者與具名插槽相對(duì)，我們可以叫它匿名插槽。因?yàn)樗挥迷O(shè)置name屬性。

單個(gè)插槽可以放置在組件的任意位置，但是就像它的名字一樣，一個(gè)組件中只能有一個(gè)該類插槽。相對(duì)應(yīng)的，具名插槽就可以有很多個(gè)，只要名字（name屬性）不同就可以了。

下面通過一個(gè)例子來展示。

父組件：

<template>
 <div class="father">
  <h4>這里是父組件</h4>
  <child>
   <div class="tmpl">
    <span>菜單1</span>
    <span>菜單2</span>
    <span>菜單3</span>
    <span>菜單4</span>
    <span>菜單5</span>
    <span>菜單6</span>
   </div>
  </child>
 </div>
</template>

子組件：

<template>
 <div class="child">
  <h4>這里是子組件</h4>
  <slot></slot>
 </div>
</template>

在這個(gè)例子里，因?yàn)楦附M件在<child></child>里面寫了html模板，那么子組件的匿名插槽這塊模板就是下面這樣。也就是說，子組件的匿名插槽被使用了，是被下面這塊模板使用了。

<div class="tmpl">
 <span>菜單1</span>
 <span>菜單2</span>
 <span>菜單3</span>
 <span>菜單4</span>
 <span>菜單5</span>
 <span>菜單6</span>
</div>

最終的渲染結(jié)果如圖所示：

注：所有demo都加了樣式，以方便觀察。其中，父組件以灰色背景填充，子組件都以淺藍(lán)色填充。

具名插槽

匿名插槽沒有name屬性，所以是匿名插槽，那么，插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個(gè)組件中出現(xiàn)N次。出現(xiàn)在不同的位置。下面的例子，就是一個(gè)有兩個(gè)具名插槽和單個(gè)插槽的組件，這三個(gè)插槽被父組件用同一套css樣式顯示了出來，不同的是內(nèi)容上略有區(qū)別。

父組件：

<template>
 <div class="father">
 <h4>這里是父組件</h4>
 <child>
  <div class="tmpl" slot="up">
  <span>菜單1</span>
  <span>菜單2</span>
  <span>菜單3</span>
  <span>菜單4</span>
  <span>菜單5</span>
  <span>菜單6</span>
  </div>
  <div class="tmpl" slot="down">
  <span>菜單-1</span>
  <span>菜單-2</span>
  <span>菜單-3</span>
  <span>菜單-4</span>
  <span>菜單-5</span>
  <span>菜單-6</span>
  </div>
  <div class="tmpl">
  <span>菜單->1</span>
  <span>菜單->2</span>
  <span>菜單->3</span>
  <span>菜單->4</span>
  <span>菜單->5</span>
  <span>菜單->6</span>
  </div>
 </child>
 </div>
</template>

子組件：

<template>
 <div class="child">
 // 具名插槽
 <slot name="up"></slot>
 <h4>這里是子組件</h4>
 // 具名插槽
 <slot name="down"></slot>
 // 匿名插槽
 <slot></slot>
 </div>
</template>

顯示結(jié)果如圖：

可以看到，父組件通過html模板上的slot屬性關(guān)聯(lián)具名插槽。沒有slot屬性的html模板默認(rèn)關(guān)聯(lián)匿名插槽。

作用域插槽 | 帶數(shù)據(jù)的插槽

最后，就是我們的作用域插槽。這個(gè)稍微難理解一點(diǎn)。官方叫它作用域插槽，實(shí)際上，對(duì)比前面兩種插槽，我們可以叫它帶數(shù)據(jù)的插槽。什么意思呢，就是前面兩種，都是在組件的template里面寫

匿名插槽

<slot></slot>

具名插槽

<slot name="up"></slot>

但是作用域插槽要求，在slot上面綁定數(shù)據(jù)。也就是你得寫成大概下面這個(gè)樣子。

<slot name="up" :data="data"></slot>
 export default {
 data: function(){
  return {
  data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
 },
}

我們前面說了，插槽最后顯示不顯示是看父組件有沒有在child下面寫模板，像下面那樣。

<child>
 html模板
</child>

寫了，插槽就總得在瀏覽器上顯示點(diǎn)東西，東西就是html該有的模樣，沒寫，插槽就是空殼子，啥都沒有。
OK，我們說有html模板的情況，就是父組件會(huì)往子組件插模板的情況，那到底插一套什么樣的樣式呢，這由父組件的html+css共同決定，但是這套樣式里面的內(nèi)容呢？

正因?yàn)樽饔糜虿宀劢壎艘惶讛?shù)據(jù)，父組件可以拿來用。于是，情況就變成了這樣：樣式父組件說了算，但內(nèi)容可以顯示子組件插槽綁定的。

我們?cè)賮韺?duì)比，作用域插槽和單個(gè)插槽和具名插槽的區(qū)別，因?yàn)閱蝹€(gè)插槽和具名插槽不綁定數(shù)據(jù)，所以父組件是提供的模板要既包括樣式由包括內(nèi)容的，上面的例子中，你看到的文字，“菜單1”，“菜單2”都是父組件自己提供的內(nèi)容；而作用域插槽，父組件只需要提供一套樣式（在確實(shí)用作用域插槽綁定的數(shù)據(jù)的前提下）。

下面的例子，你就能看到，父組件提供了三種樣式(分別是flex、ul、直接顯示)，都沒有提供數(shù)據(jù)，數(shù)據(jù)使用的都是子組件插槽自己綁定的那個(gè)人名數(shù)組。

父組件：

<template>
 <div class="father">
 <h4>這里是父組件</h4>
 <!--第一次使用：用flex展示數(shù)據(jù)-->
 <child>
  <template slot-scope="user">
  <div class="tmpl">
   <span v-for="item in user.data">{{item}}</span>
  </div>
  </template>
 </child>
 <!--第二次使用：用列表展示數(shù)據(jù)-->
 <child>
  <template slot-scope="user">
  <ul>
   <li v-for="item in user.data">{{item}}</li>
  </ul>
  </template>
 </child>
 <!--第三次使用：直接顯示數(shù)據(jù)-->
 <child>
  <template slot-scope="user">
  {{user.data}}
  </template>
 </child>
 <!--第四次使用：不使用其提供的數(shù)據(jù), 作用域插槽退變成匿名插槽-->
 <child>
  我就是模板
 </child>
 </div>
</template>

子組件：

<template>
 <div class="child">

 <h4>這里是子組件</h4>
 // 作用域插槽
 <slot :data="data"></slot>
 </div>
</template>

 export default {
 data: function(){
  return {
  data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
 }
}

結(jié)果如圖所示：

“vue中slot與slot-scope怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁題目：vue中slot與slot-scope怎么使用
網(wǎng)頁網(wǎng)址：http://muchs.cn/article48/pihiep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站營銷、網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、定制開發(fā)、品牌網(wǎng)站制作

廣告

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