Vue的插槽slot,分為3種
匿名插槽
具名插槽
作用域插槽
前兩種很好理解,無非就是子組件里定義一個slot占位符,父組件調用時,在slot對應的位置填充模板就好了。
有的時候你希望提供的組件帶有一個可從子組件獲取數據的可復用的插槽。
我們知道如果一個組件的內容是固定的,那么你可以直接把組件引入使用即可。下面問題來了,
現在我們手里有一個todolist組件,他的功能是渲染一個數組,當別人使用你這個todolist組件的時候有時候只需要渲染,但實際開發中大部分還會進行一些邏輯判斷,這時候你需要把子組件中的內容傳遞給父組件,這個時候就需要用到slot-scope?
slot-scope是什么?就是把子組件的數據傳遞給父組件的一種方式,
子組件
父組件,將數據保存在slotProps里面,下面就可以拿到子組件中的數據了