Vue作用域插槽

2021-09-28 12:57:41 字數 860 閱讀 2019

'root'

>

<

!-- 父元件呼叫子元件的時候,給子元件傳了乙個插槽 這個插槽叫作用域插槽

作用域插槽必須以 template開頭和結尾

同時這個插槽要宣告 你要從子元件接收的資料都放在哪 這裡是放在props裡面了

還要告訴子元件模板的資訊 即接收的props怎麼展示資料 --

>

"props"

>

}-- tony<

/h4>

<

/template>

<

/child>

<

/div>

vue.

component

('child',}

,/*child元件做乙個列表的迴圈,但列表中的每一項怎麼顯示由外部告知

*子元件用slot時會往slot裡面傳乙個item資料,然後上面的就會用這個item

item 就放在了slot-scope="props"中

*/template:

`

`});

/* 當子元件裡面做迴圈 或者他的某一部分dom zone 應該由外部傳遞過來時 使用作用域插槽

使用作用域插槽 子元件可以向父元件的插槽裡面傳資料(如:上面的item)

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

vue作用域插槽

首先,在 2.6.0 中,我們為具名插槽和作用域插槽引入了乙個新的統一的語法 即v slot指令 它取代了slot和slot scope這兩個目前已被廢棄但未被移除且仍在文件中的 attribute。匿名插槽,具名插槽都好理解,作用域插槽看了文件,感覺還是有點暈,記錄下。大概就是使用作用域插槽,父元...