vue 2.6.0 具名插槽, 做用域插槽

vue 2.6.0後將已廢棄的使用 slot-scope 特性的語法廢除,可是目前還可以使用,
連接地址:https://cn.vuejs.org/v2/guide...
如圖實現一個相似,星級點評的組件html

clipboard.png
父組件:vue

clipboard.png
子組件:ide

clipboard.png
子組件將 star綁定再傳給父組件的 v-slot="slotProps",再經過slotProps.star得到傳過來的值,
<template v-slot="soltProps">函數

<i :class="[soltProps.star ? on : off]"></i>

</template>
官方解釋:
做用域插槽的內部工做原理是將你的插槽內容包括在一個傳入單個參數的函數裏:ui

function (slotProps) {
// 插槽內容
}
我的理解爲這裏是一個對象即{star: value(值)}, slotProps爲該對象,
具名插槽:
父組件
<template v-slot:"header">spa

<i>具名插槽</i>

</template>
子組件:
<slot name="header"></slot>
其中v-slot:#header能夠這樣簡寫code

相關文章
相關標籤/搜索