2.6.10
https://jsfiddle.net/mybeta/1dfwsazn/
ΠΠΎΠ³Π΄Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ "ΠΡΠ΅Π΄ΠΎΡΡΠ΅ΡΠ΅ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΌΡ Π°Π½Π°Π»ΠΈΠ·Ρ DOM-ΡΠ°Π±Π»ΠΎΠ½Π°" Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, <tr is="custom-row">
), Ρ Π½Π΅ ΠΌΠΎΠ³Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»ΠΎΡΡ Ρ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ (slotProps) Π±Π΅Π· ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ. Π― Π±Ρ Ρ
ΠΎΡΠ΅Π» ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ ΡΠ°ΠΊ:
<tr is="custom-row" v-slot="slotProps">
slotProps: {{slotProps.test}}
</tr>
ΠΠ΅Π· ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ.
Π ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅.
[Vue warn]: Error compiling template: v-slot can only be used on components or <template>.
Π ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΌ Π²ΡΠΎΠ΄Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ.
ΠΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠΈ, v-slot
ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ
ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ ΠΈΠ»ΠΈ Π²Π»ΠΎΠΆΠΈΡΡ Π² ΡΠ°ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, Π½ΠΎ Π² ΡΠ΅Π³ template
.
Π Π°Π½Π΅Π΅ slot-scope
ΡΠ°Π·ΡΠ΅ΡΠ°Π»ΠΎ ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅, Π½ΠΎ ΠΎΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π°Π»Π΅Π½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ RFC: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot- syntax.md.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ»ΠΎΡ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅
<tr :is="customComp" v-slot="data"></tr>
ΠΡΠΈΠ²Π΅Ρ @posva , Π±ΠΎΠ»ΡΡΠΎΠ΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ!
ΠΠ°ΠΊ Π±ΡΠ»ΠΎ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ, Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΏΡΡΠ°Π»ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ v-slot
Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π² ΡΠ΅Π³ template
, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.
<div is="test-component">
<template v-slot:default="slotProps">
slotProps: {{slotProps.test}}
</template>
</div>
ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅, ΡΠΌ. Π‘ΠΊΡΠΈΠΏΠΊΡ:
https://jsfiddle.net/mybeta/bhcoLwu3/
ΠΡΠ»ΠΈ Π²Ρ ΠΈΠ·Π±Π΅Π³Π°Π΅ΡΠ΅ ΠΎΠ³ΠΎΠ²ΠΎΡΠΎΠΊ, ΡΠ²ΡΠ·Π°Π½Π½ΡΡ Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΌ Π°Π½Π°Π»ΠΈΠ·ΠΎΠΌ ΡΠ°Π±Π»ΠΎΠ½Π° DOM, ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ:
<test-component>
<template v-slot:default="slotProps">
slotProps: {{slotProps.test}}
</template>
</test-component>
Π½ΠΎ Ρ ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ΅ΡΠ΅ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π² ΡΠ΅Π³Π΅ tr
.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π²Ρ ΠΏΠΎΡΡΠ½ΠΈΡΡ ΡΡΠΎΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅?
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ»ΠΎΡ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ `
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ!
Π― ΠΎΠ±Π½ΠΎΠ²ΠΈΠ» ΡΠ²ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ, Π½ΠΎ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ, ΠΎΠ½ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ
ΠΠ°ΠΊΠΎΠΉ Ρ ΡΡΠΎΠ³ΠΎ ΡΡΠ°ΡΡΡ?
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π― ΠΎΠ±Π½ΠΎΠ²ΠΈΠ» ΡΠ²ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ, Π½ΠΎ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ, ΠΎΠ½ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ