Vue深入理解插槽slot的使用

2022-08-04 22:02:47

一、插槽(slot)是什麼

slot是元件內的一個預留位置，該預留位置可以在後期使用自己的標示語言填充。

作用：讓父元件可以向子元件指定位置插入html結構，也是一種元件間通訊方式，適用於父元件===>子元件

例子：

//父元件中
<Category>
	<div>html結構</div>
</Category>
//子元件中：
<template>
	<div>
		<slot>插槽的預設內容</slot>
	</div>
</template>

二、使用場景

通過插槽可以讓使用者拓展元件，去更好地複用元件和對其做客製化化處理；
如果父元件在使用到一個複用元件的時候，這個元件在不同的地方有少量的更改，如果去重寫元件是很浪費，這時，通過slot插槽向元件內部指定位置傳遞內容，完成這個複用元件在不同場景的應用。
比如：佈局元件、表格列、下拉選項、彈框顯示內容等。

三、slot的分類

預設插槽

子元件用<slot>來標記渲染的位置，在父元件的自定義標籤中寫slot中的結構。如果在子元件的<slot>中寫了結構，那麼會作為預設顯示的內容。

//父元件（資料在父元件中）
<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">
    <h3>{{title}}分類</h3>
    <slot>預設顯示內容</slot>
  </div>
</template>

效果：

具名插槽

為每個slot標記名字，也是處理具有多個插槽時的對應關係，標記名字的方法有兩個：

方法1：

//父元件
<Category title="美食">
<ul slot="foods">
   <li v-for="(item,key) in foods" :key="key">{{item}}</li>
</ul>
</Category>
//子元件
<h3>{{title}}分類</h3>
<slot name="foods">預設顯示內容</slot>     /*給插槽取名*/

方法2：此時必須標記在template標籤上

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

作用域插槽

當元素在子元件中時，想實現上述操作，就會造成資料獲取不到的問題，這時就可以使用作用域插槽，作用域這三個字就體現在資料的作用域上。

//父元件
<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>
//子元件：資料在子元件中
<template>
  <div class="category">
    <h3>{{ title }}分類</h3>
    <slot :foods="foods">預設顯示內容</slot>
  </div>
</template>

可以通過解構獲得slot-scope={foods}，還可以重新命名slot-scope={new:foods}

四、介紹對slot的理解

回答：slot就是插槽，主要的作用就是拓展元件，在重複使用一個元件的時候可以通過少量的修改就達到複用的效果。分成預設插槽、具名插槽和作用域插槽。其中前兩個都是元素在父元件中，拓展的結構也在父元件中，直接在子元件中佔位，在父元件中新增結構即可，區別就是具名插槽給插槽取了名字，多個插槽存在時可以一一對應。而作用域插槽的資料在子元件中，擴充套件的結構要在父元件中，這是就要利用slot進行子===>父的通訊，給資料一個新的作用域，因此叫做作用域插槽。

到此這篇關於Vue深入理解插槽slot的使用的文章就介紹到這了,更多相關Vue slot內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！