本教程操作環境：windows10系統、vue2.5.2，本文適用于所有品牌的電腦。

【相關文章推薦：vue.js】

vue.js插槽的作用：

1、基本使用

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

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

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

在組件標簽內的標簽中添加slot屬性，屬性值為插槽名稱:

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

登錄后復制

在組件內部通過name進行接收:

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

登錄后復制

3、作用域插槽：帶參數的插槽

組件標簽使用時，如果需要將插槽中的數據使用組件內部的數據，需要在組件標簽內添加：

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

例如：

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

登錄后復制

　　組件內部：slot內綁定屬性 <slot :val="message"></slot>

以上就是vue.js插槽有什么用的詳細內容，更多請關注風君子博客其它相關文章！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。