vue作用域插槽

2021-10-19 05:21:34 字數 494 閱讀 3922

首先,在 2.6.0 中,我們為具名插槽和作用域插槽引入了乙個新的統一的語法 (即v-slot指令)。它取代了slotslot-scope這兩個目前已被廢棄但未被移除且仍在文件中的 attribute。

匿名插槽,具名插槽都好理解,作用域插槽看了文件,感覺還是有點暈,記錄下。大概就是使用作用域插槽,父元件可以拿到子元件的資料並渲染。

為了讓user在父級的插槽內容中可用,子元件可以將user在slot標籤上繫結屬性值,如:

現在在父元件中,我們可以使用帶值的v-slot來定義我們提供的插槽 prop 的名字:

}

在這個例子中,我們選擇將包含所有插槽 prop 的物件命名為scope,但你也可以使用任意你喜歡的名字。

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