作用域插槽的寫法

2021-10-06 11:51:42 字數 770 閱讀 1489

2.6.0 更新作用域插槽

主要作用:讓父元件能夠訪問子元件插槽中的子元件的資料。

vm例項:

var vm =

newvue(,

methods:

, components:},

}}})

;<

/script>

子元件 childcom:

"cpn"

>

'list'

>

<

!--list是子元件data中的資料,oder是自己命名的變數,前面還有v-bind繫結--

>

for=

"(item, index) in list"

:key=

"index"

>

}<

/li>

<

/ul>

<

/slot>

<

/div>

<

/template>

>

<

/cpn>

'sar'

>

<

!--這裡的sar也是自己命名的--

>

}<

/span>

<

/template>

<

/cpn>

<

/div>

插槽 具名插槽 作用域插槽

一 插槽 當子元件的有一部分內容是根據父元件傳過來的dom顯示的時候,可以使用插槽 通過插槽,父元件向子元件優雅的傳遞dom結構,同時子元件使用插槽的內容,通過 body well 二 具名插槽 slot header header slot footer footer 三 作用域插槽 作用域插槽 ...

作用域插槽

應用場景 父元件對子元件的內容進行加工處理 我們先來看2.6版本之前的寫法 父元件 子元件 再來看2.6版本之後的寫法,子元件的寫法不用變,和原來一模一樣,來看父元件的寫法 父元件 我們可以清晰的看到,在子元件中有個插槽slot通過v bind繫結了乙個值item,在父元件中引用了子元件child,...

Vue作用域插槽

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