// 子組件
<template>
<div class="left-container">
<h3>Left 組件</h3>
<hr />
<p>子組件的第一個 p 標(biāo)簽</p>
<!-- 通過 slot 標(biāo)簽，為用戶預(yù)留內(nèi)容占位符（插槽） -->
<slot></slot>
<p>子組件最后一個 p 標(biāo)簽</p>
</div>
</template>
// 父組件
<template>
<div class="app-container">
<h1>App 根組件</h1>
<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">
<h3>Left 組件</h3>
<hr />
<p>子組件的第一個 p 標(biāo)簽</p>
<!-- 通過 slot 標(biāo)簽，為用戶預(yù)留內(nèi)容占位符（插槽） -->
<slot name="default"></slot>
<p>子組件最后一個 p 標(biāo)簽</p>
</div>
</template>

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

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

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

4.具名插槽

如果在封裝組件時需要預(yù)留多個插槽節(jié)點，則需要為每個插槽指定具體的 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)容的時候，我們可以在一個元素上使用 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 是一個作用域插槽-->
<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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: