Vue插槽slot如何使用

這篇文章主要介紹“Vue插槽slot如何使用”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue插槽slot如何使用”文章能幫助大家解決問(wèn)題。

一、插槽(slot)是什么

slot是組件內(nèi)的一個(gè)占位符，該占位符可以在后期使用自己的標(biāo)記語(yǔ)言填充。

作用：讓父組件可以向子組件指定位置插入html結(jié)構(gòu)，也是一種組件間通信方式，適用于父組件===>子組件

例子：

//父組件中
<Category>
	<div>html結(jié)構(gòu)</div>
</Category>
//子組件中：
<template>
	<div>
		<slot>插槽的默認(rèn)內(nèi)容</slot>
	</div>
</template>

二、使用場(chǎng)景

• 通過(guò)插槽可以讓用戶拓展組件，去更好地復(fù)用組件和對(duì)其做定制化處理；

• 如果父組件在使用到一個(gè)復(fù)用組件的時(shí)候，這個(gè)組件在不同的地方有少量的更改，如果去重寫組件是很浪費(fèi)，這時(shí)，通過(guò)slot插槽向組件內(nèi)部指定位置傳遞內(nèi)容，完成這個(gè)復(fù)用組件在不同場(chǎng)景的應(yīng)用。

• 比如：布局組件、表格列、下拉選項(xiàng)、彈框顯示內(nèi)容等。

三、slot的分類

默認(rèn)插槽

子組件用<slot>來(lái)標(biāo)記渲染的位置，在父組件的自定義標(biāo)簽中寫slot中的結(jié)構(gòu)。如果在子組件的<slot>中寫了結(jié)構(gòu)，那么會(huì)作為默認(rèn)顯示的內(nèi)容。

//父組件（數(shù)據(jù)在父組件中）
<template>
  <div id="app">
    <Category title="美食">
      <ul>
        <li v-for="(item,key) in foods" :key="key">{{item}}</li>
    </ul>
    </Category>
    <Category title="游戲">
     <ul>
        <li v-for="(item,key) in games" :key="key">{{item}}</li>
    </ul>
    </Category>
    <Category title="電影"></Category>
  </div>
</template>
//子組件
<template>
  <div class="category">
    <h4>{{title}}分類</h4>
    <slot>默認(rèn)顯示內(nèi)容</slot>
  </div>
</template>

效果：

具名插槽

為每個(gè)slot標(biāo)記名字，也是處理具有多個(gè)插槽時(shí)的對(duì)應(yīng)關(guān)系，標(biāo)記名字的方法有兩個(gè)：

方法1：

//父組件
<Category title="美食">
<ul slot="foods">
   <li v-for="(item,key) in foods" :key="key">{{item}}</li>
</ul>
</Category>
//子組件
<h4>{{title}}分類</h4>
<slot name="foods">默認(rèn)顯示內(nèi)容</slot>     /*給插槽取名*/

方法2：此時(shí)必須標(biāo)記在template標(biāo)簽上

<template v-slot:foods>
    <ul>
      <li v-for="(item,key) in foods" :key="key">{{item}}</li>
  </ul>
</template>

作用域插槽

當(dāng)元素在子組件中時(shí)，想實(shí)現(xiàn)上述操作，就會(huì)造成數(shù)據(jù)獲取不到的問(wèn)題，這時(shí)就可以使用作用域插槽，作用域這三個(gè)字就體現(xiàn)在數(shù)據(jù)的作用域上。

//父組件
<template>
  <div id="app">
    <Category title="美食">
      <template scope="foods">
        <ul>
          <li v-for="(item, key) in foods.foods" :key="key">{{ item }}</li>
        </ul>
      </template>
    </Category>
    <Category title="美食">
      <template scope="foods">
      <!-- <template slot-scope="foods"> -->
        <ol>
          <li v-for="(item, key) in foods.foods" :key="key">{{ item }}</li>
        </ol>
      </template>
    </Category>
  </div>
</template>
//子組件：數(shù)據(jù)在子組件中
<template>
  <div class="category">
    <h4>{{ title }}分類</h4>
    <slot :foods="foods">默認(rèn)顯示內(nèi)容</slot>
  </div>
</template>

可以通過(guò)解構(gòu)獲得slot-scope={foods}，還可以重命名slot-scope={new:foods}

四、介紹對(duì)slot的理解

回答：slot就是插槽，主要的作用就是拓展組件，在重復(fù)使用一個(gè)組件的時(shí)候可以通過(guò)少量的修改就達(dá)到復(fù)用的效果。分成默認(rèn)插槽、具名插槽和作用域插槽。其中前兩個(gè)都是元素在父組件中，拓展的結(jié)構(gòu)也在父組件中，直接在子組件中占位，在父組件中添加結(jié)構(gòu)即可，區(qū)別就是具名插槽給插槽取了名字，多個(gè)插槽存在時(shí)可以一一對(duì)應(yīng)。而作用域插槽的數(shù)據(jù)在子組件中，擴(kuò)展的結(jié)構(gòu)要在父組件中，這是就要利用slot進(jìn)行子===>父的通信，給數(shù)據(jù)一個(gè)新的作用域，因此叫做作用域插槽。

關(guān)于“Vue插槽slot如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。