Vue中的插槽slot如何使用

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

1.什么是插槽

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

2.插槽的使用

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

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

3.v-slot指令

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

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

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

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

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

4.具名插槽

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

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

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

// 父組件中
<Article>
<template #title>
<h4>靜夜思</h4>
</template>
<template #content>
<div>
<p>我見青山多嫵媚，</p>
<p>料青山見我應(yīng)如是。</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: 的形式，接收作用域插槽對外提供的數(shù)據(jù)

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

7.解構(gòu)插槽 Prop

作用域插槽對外提供的數(shù)據(jù)對象，可以使用解構(gòu)賦值簡化數(shù)據(jù)的接收過程

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

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