Vue中的插槽slot如何使用

本篇內容主要講解“Vue中的插槽slot如何使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue中的插槽slot如何使用”吧!

1.什么是插槽

插槽（slot）是 vue 為組件的封裝者提供的能力。允許開發者在封裝組件時，把不確定的、希望由用戶 指定的部分定義為插槽。

2.插槽的使用

在封裝組件時，可以通過 元素定義插槽，從而為用戶預留內容占位符。

// 子組件
<template>
<div class="left-container">
<h4>Left 組件</h4>
<hr />
<p>子組件的第一個 p 標簽</p>
<!-- 通過 slot 標簽，為用戶預留內容占位符（插槽） -->
<slot></slot>
<p>子組件最后一個 p 標簽</p>
</div>
</template>
// 父組件
<template>
<div class="app-container">
<h2>App 根組件</h2>
<hr />
<div class="box">
<!-- 渲染 Left 組件和 Right 組件 -->
<!-- 在使用組件時，為插槽指定具體的內容 -->
<Left>
<p>用戶自定義內容</p>
</Left>
</div>
</div>
</template>

3.v-slot指令

vue 官方規定：每一個 slot 插槽，都要有一個 name 名稱，如果省略了 slot 的 name 屬性，則有一個 默認名稱叫做 default。 默認情況下，在使用組件的時候，提供的內容都會被填充到名字為default 的插槽之中如果要把內容填充到指定名稱的插槽中，需要使用 v-slot: 這個指令， v-slot: 指令后面要跟插槽的名字。

// 父組件
<Left>
<template v-slot:default>
<p>用戶自定義內容</p>
</template>
</Left>
// 子組件
<template>
<div class="left-container">
<h4>Left 組件</h4>
<hr />
<p>子組件的第一個 p 標簽</p>
<!-- 通過 slot 標簽，為用戶預留內容占位符（插槽） -->
<slot name="default"></slot>
<p>子組件最后一個 p 標簽</p>
</div>
</template>

v-slot:指令不能直接用在元素身上，必須用在template 標簽上 template這個標簽，它是一個虛擬的標簽，只起到包裹性質的作用，但是，不會被渲染為任何實 質性的html元素

注：沒有預留插槽的內容會被丟棄，如果在封裝組件時沒有預留任何 插槽，則用戶提供的任何自定義內容都會被丟棄。

// 子組件
<template>
<div class="left-container">
<h4>Left 組件</h4>
<hr />
<p>子組件的第一個 p 標簽</p>
<!-- 封裝組件時，沒有預留任何插槽 -->
<p>子組件最后一個 p 標簽</p>
</div>
</template>
// 父組件
<template>
<div class="app-container">
<h2>App 根組件</h2>
<hr />
<div class="box">
<!-- 自定義的內容會被丟棄 -->
<Left>
<p>用戶自定義內容</p>
</Left>
</div>
</div>
</template>

4.具名插槽

如果在封裝組件時需要預留多個插槽節點，則需要為每個 插槽指定具體的 name 名稱。這種帶 有具體名稱的插槽叫做“具名插槽”。

<template>
<div class="article-container">
<!-- 文章標題 -->
<div class="header-box">
<slot name="title"></slot>
</div>
<!-- 文章內容 -->
<div class="content-box">
<slot name="content"></slot>
</div>
<!-- 文章作者 -->
<div class="footer-box">
<slot name="author"></slot>
</div>
</div>
</template>

在向具名插槽提供內容的時候，我們可以在一個 元素上使用 v-slot 指令，并以 v-slot 的參 數的形式提供其名稱

// 父組件中
<Article>
<template #title>
<h4>靜夜思</h4>
</template>
<template #content>
<div>
<p>我見青山多嫵媚，</p>
<p>料青山見我應如是。</p>
</div>
</template>
<template #author>
<div>作者：大熊</div>
</template>
</Article>

5.具名插槽的簡寫形式

<tbody>
<!-- 下面的slot 是一個作用域插槽-->
<slot v-for="item in 1 ist" :user="item"></slot>
</tbody>

6.作用域插槽

可以使用 v-slot: 的形式，接收作用域插槽對外提供的數據

<my-com-3>
<!-- 1.接收作用域插槽對外提供的數據-->
<template v-slot:default=" scope">
<tr>
<!-- 2.使用作用域插槽的數據-->
<td> {{ scope }}</td>
</tr>
</ template>
</my-com-3>

7.解構插槽 Prop

作用域插槽對外提供的數據對象，可以使用解構賦值簡化數據的接收過程

<myone>
<!-- v-slot: 可以簡寫成# -->
<!-- 作用域插槽對外提供的數據對象，可以通過”解構賦值"簡化接收的過程-->
<template #default="{user}">
<tr>
<td> {{user.id}}</td>
<td> {{user.name}}</td>
<td> {{user.state}}</td>
</tr>
</ template>
</myone>

到此，相信大家對“Vue中的插槽slot如何使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！