插槽就是子組件中的提供給父組件使用的一個占位符,用<slot></slot> 表示,默認情況下組件內部包裹的內容是不會顯示的,如果需要進行顯示則需要通過插槽來進行顯示,父組件可以在這個占位符中填充任何模板代碼,如 HTML、組件等,填充的內容會替換子組件的<slot></slot>標簽。
匿名插槽:
v-slot 后面沒有名字
在組件內部通過<slot></slot>進行接收
子組件中占位
image.png
在父組件中給這個占位符填充內容:
具名插槽:
一個子組件可以放多個插槽,而且可以放在不同的地方,而父組件填充內容時,可以根據這個名字把內容填充到對應插槽中。
v-slot:插槽的名稱
在組件內部通過<slot name="插槽的名稱"></slot>進行接收
子組件插槽
image.png
父組件填充內容, 父組件通過 v-slot:[name] 的方式指定到對應的插槽中
image.png
插槽作用域:
常用的一種子傳父的通信方式,作用域插槽其實就是帶數據的插槽,即帶參數的插槽,簡單的來說就是子組件提供給父組件的參數,該參數僅限于插槽中使用,父組件可根據子組件傳過來的插槽數據來進行不同的方式展現和填充插槽內容。
語法:v-slot:插槽名稱(可選 如果不寫默認是default) = "變量(這個變量是一個對象)"
作用:讓組件來提供自身需要顯示的內容
子組件:
image.png
父組件:
image.png