vue中slot插槽詳解

一、slot插槽的基本使用

首先創建一個子組件:
如圖
在這裏插入圖片描述
然後創建一個父組件,引入子組件:
如圖:
在這裏插入圖片描述
在這裏子組件中放了一個 插槽來充當佔位符,然後在父組件那邊引入後, 就變成相應的標籤類容;

這裏還可以給插槽一個默認值,比如 我是默認值 此時你在父組件中引入,然後額外再加任何標籤的話,就會顯示你此時的默認值;

二、具名插槽:

子組件:
在這裏插入圖片描述
父組件:
在這裏插入圖片描述
可以看到,我們在父組件中,並沒有寫左邊的那個插槽,但是還是顯示了個默認值,所以,在引入組件時,每個頁面都有的相同部分我們就可以直接給一個默認的;

顯示效果:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章