vue2.0 slot 分發內容
1.概述:
簡單來說,假如父組件需要在子組件內放一些DOM,那麽這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示,就是slot分發負責的活。
2.默認情況下
父組件在子組件內套的內容,是不顯示的。
代碼:
效果圖:
顯示內容是一個button按鈕,不包含span標簽裏面的內容;
3.單個slot
簡單來說,只使用這個標簽的話,可以將父組件放在子組件的內容,放到想讓他顯示的地方。
代碼:
例如這樣寫的話,結果是:
<button><span>12345</span>為了明確作用範圍,所以使用button標簽</button>
效果圖:
即父組件放在子組件裏的內容,插到了子組件的<slot></slot>位置;
註意,即使有多個標簽,會一起被插入,相當於用父組件放在子組件裏的標簽,替換了<slot></slot>這個標簽。
4.具體命名 slot
將放在子組件裏的不同html標簽放在不同的位置
父組件在要分發的標簽裏添加 slot=”name名” 屬性
子組件在對應分發的位置的slot標簽裏,添加 name=”name名” 屬性,
然後就會將對應的標簽放在對應的位置了。
代碼:
顯示結果為:
<button> <span slot="first">12345</span> 為了明確作用範圍, <span slot="second">56789</span> 所以使用button標簽 </button>
效果圖:
5.分發內容的作用域:
被分發的內容的作用域,根據其所在模板決定,例如,以上標簽,其在父組件的模板中(雖然其被子組件的children標簽所包括,但由於他不在子組件的template屬性中,因此不屬於子組件),則受父組件所控制。
代碼:
6.當沒有分發內容時的提示:
假如父組件沒有在子組件中放置有標簽,或者是父組件在子組件中放置標簽,但有slot屬性,而子組件中沒有該slot屬性的標簽。
那麽,子組件的slot標簽,將不會起到任何作用。
除非,該slot標簽內有內容,那麽在無分發內容的時候,會顯示該slot標簽內的內容。
代碼:
效果圖:
7.假如想控制子組件根標簽的屬性
(1)
(2)
vue2.0 slot 分發內容