Vue元件之作用域插槽

2022-05-09 05:06:13 字數 739 閱讀 5825

寫作用域插槽之前,先介紹一下vue中的slot內容分發:

如果標籤之間沒有插入那兩個p標籤的話,頁面會顯示子元件模板中定義的「父元件如果沒有插入內容,我將被顯示

」這一則內容,但如果標籤之間有插入內容的話,則子元件模板中的標籤以及之間的內容都會被替換成標籤之間插入的內容。

這裡子元件內的備用內容,作用域是子元件本身;

作用域插槽:

顯示結果:

template內可以通過臨時變數props來訪問來自子元件插槽的資料msg

作用域插槽更具代表性的用例是列表元件:

子元件接受乙個父元件傳過來的books陣列。並且將它在name為book的slot上使用v-for迴圈,同時暴露變數bookname,父元件的my-list標籤內就可以通過props.bookname訪問到繫結的資料;

作用域插槽的使用場景:既可以復用子元件的slot,又可以使slot內容不一致;

Vue作用域插槽

root 父元件呼叫子元件的時候,給子元件傳了乙個插槽 這個插槽叫作用域插槽 作用域插槽必須以 template開頭和結尾 同時這個插槽要宣告 你要從子元件接收的資料都放在哪 這裡是放在props裡面了 還要告訴子元件模板的資訊 即接收的props怎麼展示資料 props tony h4 templ...

Vue作用域插槽

doctype html en utf 8 編譯作用域 title script head isshow cpn div cpn 我是子元件 h2 我是子元件的內容 p isshow 按鈕 button div template newvue components script body html ...

vue 作用域插槽

先看下 就會明白 父元件 import temp from components temp export default data 子元件 template export default 效果 插槽,也就是slot,是元件的一塊html模板,這塊模板顯示不現實 以及怎樣顯示由父元件來決定。插槽模板是...