child 컴포넌트가 아래와 같다고 하자.
– child.vue –
[code]
<template>
<div>
<slot>
{{ user.name }}
</slot>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: ‘홍길동’,
age: 30,
},
}
},
}
</script>
[/code]
이 컴포넌트는 user 의 name을 출력한다. 이때 name 대신 age 를 출력하고 싶다고 할때 부모컴포넌트에서 아래와 같이 사용했다.
– parent.vue –
[code]
<child>
{{ user.age }}
</child>
[/code]
하지만 이 코드는 작동하지 않는다. slot 안에 사용한 user 는 자식컴포넌트(child.vue)의 데이터이고 부모컴포넌트(parent.vue)는 이것을 알지 못하기 때문이다.
이때 자식컴포넌트에서 자신의 데이터를 부모가 사용할 수 있게 하는 방법이 있다. 자신의 데이터를 slot 에 바인딩 해주면 된다.
형식은 아래와 같다.
[code]
<slot v-bind:부모에게전달될변수이름=”데이터”>
[/code]
이것을 적용한 코드는 아래와 같다.
– child.vue –
[code]
<template>
<div>
<slot :person=”user”>
{{ user.name }}
</slot>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: ‘홍길동’,
age: 30,
},
}
},
}
</script>
[/code]
부모컴포넌트로는 아래와 같이 json 형식의 묶음으로 전달된다.
[code]
{
person: {
name: ‘홍길동’,
age: 30,
}
}
[/code]
부모컴포넌트에서는 v-slot:슬롯이름=”[Object]” 형식으로 받아올 수 있다. 이를 적용한 코드는 아래와 같다.
– parent.vue –
[code]
<child>
<template v-slot:default=”data”>
{{ data.person.age }}
</template>
</child>
[/code]
결과는 age 즉, 30이 출력된다.
