vue slot的使用介紹

插槽：slot （不知道我這樣理解是否是對的，歡迎大佬指點）

具體是什麼樣子的，請看例子說明

父組件代碼

子組件代碼

 

結果

 

能夠看到 ，結果是父組件裏面內容顯示了，子組件內容顯示了，可是在父組件中插入子組件的內容是沒有顯示的，這樣寫無效！

若是想要顯示出來，在子組件裏面添加slot標籤就能夠了

結果是

-----------------------------------------------------------------

因此，若是想要在父組件中去子組件插入內容，須要先在子組件中添加slot標籤

子組件中<slot name="color"></slot>標籤中 name屬性是可選值，和父組件中<span slot="color" style="color: #F00;">紅色的</span>裏面的slot的值是對應的，若是在父組件中添加了slot=‘xxx’這個屬性，

子組件中必須添加name=‘xxx’與之對應，不然沒法顯示。
反之若是在子組件中添加了name=‘xxx’，父組件不寫相同的slot=‘xxx’屬性與之對應，也沒法顯示。
總之，父組件中子組件的插槽屬性slot=‘xxx’和子組件slot標籤的name值是對應的，能夠一對多，多對一，多對多，一對一隨意搭配，可是要顯示出來就必須有對應的值，若是父組件的插槽中只寫標籤，標籤不添加slot=‘xxx’的屬性，子組件中的slot標籤也不寫name=‘xxx’屬性，默認的也能夠顯示出來
如圖
父組件

子組件

結果

結束語：看懂了這個以後，同時也懂了許多框架封裝的原理，實用性也是比較強的，對於須要封裝代碼的話。

我是剛入門不久的前端工程師，寫得內容仍是有點亂，我會慢慢改進排版以及內容，但願各位多多指點，多多支持，謝謝

（ps: 若是有剛加入前端這個行業的，比較迷茫的同窗，歡迎進羣交流，建立一個星期了，結果然的只有我一我的，可是我會努力的，但願不嫌棄的同行或者大佬加羣你們一塊兒交流，相信將來會更好

羣名稱：web技術交流羣（往全棧發展的）

羣   號：815957915

）