vue中的slot插槽學習記錄

vue中插槽主要是__在父組件中映射子組件數據及內容用的__;
在沒有改版之前分爲:普通插槽、具名插槽、作用域插槽(帶着數據的插槽,就是可以直接使用父組件映射過來的值);根據名字不同,很容易就明白作用了;廢棄了就只做個瞭解;
改版之後,使用v-slot來表示,且限制了只能用在__component和template__上,其他的標籤如改版之前常用來舉例子的列表等標籤上都會報錯。【v-slot:slotName】也有簡寫,【#slotName】(我以前常見有代碼是#default='xxx’的,懵逼了半天這default的意思,不過想想vue是指令當道,查了一下#才知道)後面有了值,就是原來作用域插槽了;另外,還具備了【動態插槽名v-slot:[attrState]=‘msg’】。
注意:

1) 單獨在 [ ] 方括號中也可以使用表達式,但是不能存在引號和空格

2) 當然 這個動態的值 可以通過 方法,計算屬性,或者 data數據 裏面的內容。重要的是這個動態的值 是 引用組件的 作用域。簡單點說就是父級組件的作用域。

另外,還增加了【解構插槽】,應該算作是升級了原來的作用域插槽,還可以設置默認值的內容。

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