插槽
當元件中只有乙個插槽的時候,我們可以不設定 slot 的 name 屬性。
v-slot 後可以不帶引數,但是 v-slot 在沒有設定 name 屬性的時候,
插槽口會預設為「default」。
插槽主要是在封裝元件的時候去使用
注意點:v-slot 只能新增在 上哈。
第一種插槽(匿名插槽)現在我們封裝乙個元件,在元件中可以自定義內容。
這個時候我們就可以使用插槽了。
插槽可以將父頁面中的內容展示在子元件中指定的位置。
父頁面匿名插槽新增的資料
子元件
解釋
子當元件渲染的時候, 將會被替換為「匿名插槽新增的資料 」。
插槽還可以包含任何模板**,包括 html,或者其他元件。
第二種插槽(具名插槽)以及插槽簡寫很多的時候,我們可能在元件的不同位置展示不同的內容。
這個時候我們就需要使用具名插槽。
跟 v-on 和 v-bind 一樣,v-slot 也有縮寫。
(v-slot:) 替換為字元 #
例如 v-slot:header 可以被重寫為 #header:
具名插槽的使用
子元件
第三種插槽(作用域插槽)
有時讓插槽內容能夠訪問子元件中才有的資料是很有用的。
當乙個元件被用來渲染乙個專案陣列時,這是乙個常見的情況,
我們希望能夠自定義每個專案的渲染方式。
作用域插槽的使用父元件.vue
子元件
vue3 插槽作用域的使用
當我們在父元件定義了乙個陣列,data 想把它傳到子元件處理後 props 通過插槽的方式再傳送回父元件 template v for item,index in names key item slot slot template 在父元件對子元件中處理過的資料進行使用時,比如說我們想要在父元件想使...
vue3安裝 你期待已久的Vue 3 正式發布啦
vue.js 3.0 one piece 已正式發布,此框架新的主要版本提供了更好的效能 更小的 包體積 更好的 typescript 整合 用於處理大規模用例的新 api,並為框架未來的長期迭代奠定了堅實的基礎。3.0 版本的開發周期長達兩年多,期間產生了 30 rfcs 2600 commits...
vue插槽樣式 Vue的插槽的簡單介紹以及示例
vue插槽的概念 vue的插槽,是一種內容分發機制,但是我感覺它更加像元件的一種佔位符的概念,通過插槽,等待元件外部傳入複雜的內容。使用插槽的好處 在以前的例子中todo item插槽直接寫在了todo list插槽中,其實是比較不合理的,它會導致todo list插槽比較死板,無法重用更多的其他元...