vue.js插槽有什麼用

vue.js插槽的作用：1、顯示標籤，在組件內部透過【】進行接收；2、命名插槽，增加插槽的彈性； 3.帶參數的插槽，將插槽中的資料使用組件內部的資料。

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

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

#vue.js插槽的作用：

#1、基本使用

若組件標籤內部嵌套一些其它標籤的時候，這些標籤無法顯示，若要顯示的話，在組件內部透過<slot>&lt ;/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>

#相關免費學習推薦：JavaScript（影片）

以上是vue.js插槽有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！