溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue.js插槽的作用是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
vue.js插槽的作用：1、顯示標簽，在組件內部通過【<slot></slot>】進行接收；2、命名插槽，增加插槽的靈活性；3、帶參數的插槽，將插槽中的數據使用組件內部的數據。
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插槽的作用是什么內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
