Vue: λ²”μœ„ μŠ¬λ‘―μ€ 일반 μš”μ†Œμ˜ 동적 ꡬ성 μš”μ†Œ λ‚΄λΆ€μ—μ„œ μ‚¬μš©λ  λ•Œ κ²½κ³ ν•©λ‹ˆλ‹€.

에 λ§Œλ“  2019λ…„ 06μ›” 13일  Β·  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 , κ·€ν•˜μ˜ μ˜κ²¬μ— κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€!

μ œμ•ˆ λœλŒ€λ‘œ template νƒœκ·Έ 내에 쀑첩 된 v-slot 도 μ‚¬μš©ν•˜λ €κ³ ν–ˆμŠ΅λ‹ˆλ‹€.

<div is="test-component">
  <template v-slot:default="slotProps">
    slotProps: {{slotProps.test}}
  </template>
</div>

κ·ΈλŸ¬λ‚˜ 경고도 μƒμ„±λ©λ‹ˆλ‹€. fiddle을 μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€.
https://jsfiddle.net/mybeta/bhcoLwu3/

DOM ν…œν”Œλ¦Ώ νŒŒμ‹± κ²½κ³ λ₯Ό ν”Όν•˜λ©΄ 잘 μž‘λ™ν•©λ‹ˆλ‹€.

<test-component>
  <template v-slot:default="slotProps">
    slotProps: {{slotProps.test}}
  </template>
</test-component>

ν•˜μ§€λ§Œ tr νƒœκ·Έμ—μ„œ ꡬ성 μš”μ†Œλ₯Ό μ‚¬μš©ν•  λ•Œμ£Όμ˜ν•΄μ•Όν•œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.

λ˜ν•œμ΄ λŒ“κΈ€μ— λŒ€ν•΄ μ’€ 더 μ„€λͺ…ν•΄ μ£Όμ‹œκ² μŠ΅λ‹ˆκΉŒ?

λ²”μœ„κ°€ μ§€μ •λœ 슬둯이 ν•˜λ‚˜λ§Œ 있으면`

감사!

λ‚΄ λŒ“κΈ€μ„ μ—…λ°μ΄νŠΈν–ˆμ§€λ§Œ μ–΄μ¨Œλ“  κ²½κ³ κ°€ λ‚˜νƒ€λ‚˜λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. μ‹€μ œλ‘œ κ²½κ³ κ°€ λ‚˜νƒ€λ‚˜μ§€ μ•Šμ•„μ•Όν•©λ‹ˆλ‹€.

μ΄κ²ƒμ˜ μƒνƒœλŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰