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 , κ·νμ μ견μ κ°μ¬λ립λλ€!
μ μ λλλ‘ 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
νκ·Έμμ κ΅¬μ± μμλ₯Ό μ¬μ©ν λμ£Όμν΄μΌνλ€κ³ μκ°ν©λλ€.
λνμ΄ λκΈμ λν΄ μ’ λ μ€λͺ ν΄ μ£Όμκ² μ΅λκΉ?
λ²μκ° μ§μ λ μ¬λ‘―μ΄ νλλ§ μμΌλ©΄`
κ°μ¬!
λ΄ λκΈμ μ λ°μ΄νΈνμ§λ§ μ΄μ¨λ κ²½κ³ κ° λνλλ κ² κ°μ΅λλ€. μ€μ λ‘ κ²½κ³ κ° λνλμ§ μμμΌν©λλ€.
μ΄κ²μ μνλ 무μμ λκΉ?
κ°μ₯ μ μ©ν λκΈ
λ΄ λκΈμ μ λ°μ΄νΈνμ§λ§ μ΄μ¨λ κ²½κ³ κ° λνλλ κ² κ°μ΅λλ€. μ€μ λ‘ κ²½κ³ κ° λνλμ§ μμμΌν©λλ€.