vue 插槽作用域的使用

2022-09-14 13:27:09 字數 408 閱讀 9525

父元件想要在自個的模板中使用子元件的data資料,有3種方式:

1. 子元件傳送事件:主動方是子元件

2. 父元件獲取子元件的物件,通過this.childredn或refs,但這種方式大多是用在scirpt**裡面,在template模板中並不適用

3. 插槽作用域的方式獲取,該方式能在template模板中來獲取子元件的data資料,主要也是為了講這個

直接解釋會比較麻煩,先看**在解釋:

大概的步驟是這樣的:

1. 在子元件的slot標籤定義乙個屬性(屬性名任意),為該屬性繫結子元件中的data資料

2. 在父元件的template中使用子元件並新增插槽時,一定要被標籤所包含,並設定slot-scope屬性,slot-scope屬性值代表 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模板,這塊模板顯示不現實 以及怎樣顯示由父元件來決定。插槽模板是...