快捷導(dǎo)航

Vue中插槽slot的使用方法

更新時(shí)間：2023年03月25日 08:42:27 作者：大熊李子

插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用<slot></slot> 表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下

1.什么是插槽

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

2.插槽的使用

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

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

3.v-slot指令

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

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

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

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

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

4.具名插槽

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

<template>
<div class="article-container">
<!-- 文章標(biāo)題 -->
<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)容的時(shí)候，我們可以在一個(gè) 元素上使用 v-slot 指令，并以 v-slot 的參數(shù)的形式提供其名稱

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

5.具名插槽的簡寫形式

<tbody>
<!-- 下面的slot 是一個(gè)作用域插槽-->
<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>

到此這篇關(guān)于Vue中插槽slot的使用方法的文章就介紹到這了,更多相關(guān)Vue插槽slot內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: