vue2 1 x 新增作用域插槽

2022-08-25 00:12:13 字數 592 閱讀 1940

1.定義:

作用域插槽是一種特殊型別的插槽,用作使用乙個(能夠傳遞資料到)到可重用模板替換已渲染元素。

在子元件中,只需將資料傳遞到插槽,就像你將props傳遞給元件一樣。

注:在父級中,具有特殊屬性scope的元素,表示他是作用域插槽的模板。scope的值對應乙個臨時變數名,此變數接收從子元件中傳遞的prop物件:

例項如下:

例項的輸出結果為:

2。作用域插槽更具代表性的用例是列表元件,允許元件自定義應該如何渲染列表每一項:

輸出結果為:

其實質是在不同的作用域內進行傳值。

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模板,這塊模板顯示不現實 以及怎樣顯示由父元件來決定。插槽模板是...