本教程操作環(huán)境：windows10系統(tǒng)、vue2.5.2，本文適用于所有品牌的電腦。

【相關(guān)文章推薦：vue.js】

vue.js插槽的作用：

1、基本使用

若組件標(biāo)簽內(nèi)部嵌套一些其它標(biāo)簽的時候，這些標(biāo)簽無法顯示，若要顯示的話，在組件內(nèi)部通過<slot></slot>進(jìn)行接收，slot會將所以標(biāo)簽在同一個位置全部進(jìn)行接收顯示

2、命名插槽（具名插槽）

好處：可以增加插槽的靈活性

在組件標(biāo)簽內(nèi)的標(biāo)簽中添加slot屬性，屬性值為插槽名稱:

<div slot="slotName"></div>

登錄后復(fù)制

在組件內(nèi)部通過name進(jìn)行接收:

<slot name="slotName"></slot>

登錄后復(fù)制

3、作用域插槽：帶參數(shù)的插槽

組件標(biāo)簽使用時，如果需要將插槽中的數(shù)據(jù)使用組件內(nèi)部的數(shù)據(jù)，需要在組件標(biāo)簽內(nèi)添加：

<template scope="props""><div></div></template>，用來接收組件傳遞過來的數(shù)據(jù),通過props.val(這個val屬性來自于組件內(nèi)部slot綁定的屬性)

例如：

　　<List>
　　　　<template scope="props"><div>{{props.val}}</div></template>
　　</List>

登錄后復(fù)制

　　組件內(nèi)部：slot內(nèi)綁定屬性 <slot :val="message"></slot>

以上就是vue.js插槽有什么用的詳細(xì)內(nèi)容，更多請關(guān)注風(fēng)君子博客其它相關(guān)文章！

總結(jié)

以上是生活随笔為你收集整理的vue.js插槽有什么用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。