Vue: Scoped Slot ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°Π΅Ρ‚ ΠΏΡ€ΠΈ использовании Π²Π½ΡƒΡ‚Ρ€ΠΈ динамичСского ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π½Π° ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ элСмСнтС

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 13 июн. 2019  Β·  4ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: vuejs/vue

ВСрсия

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>.

Π’ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€ΠΎΠ΄Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ.

bug contribution welcome good first issue has PR warnings

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π― ΠΎΠ±Π½ΠΎΠ²ΠΈΠ» свой ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π½ΠΎ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ всС Ρ€Π°Π²Π½ΠΎ появляСтся, ΠΎΠ½ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ

ВсС 4 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Как сказано Π² ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠΈ, 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 .

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²Ρ‹ ΠΏΠΎΡΡΠ½ΠΈΡ‚ΡŒ этот ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅?

Если Ρƒ вас Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ слот с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ видимости, Π²Ρ‹ смоТСтС ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ `

Благодаря!

Π― ΠΎΠ±Π½ΠΎΠ²ΠΈΠ» свой ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π½ΠΎ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ всС Ρ€Π°Π²Π½ΠΎ появляСтся, ΠΎΠ½ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ

Какой Ρƒ этого статус?

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ