Vue의 slot에 대해

부모 컴포넌트가 자식 컴퍼넌트에 데이터를 보내는 방법이 크게 두 가지인데,

 

하나가 props이고 다른 하나가 slot이다.

 

props는 자식 컴포넌트의 script로 보내 script안에서나 html에서나 자유롭게 사용할 수 있지만,

 

slot은 자식 컴포넌트의 html에밖에 보낼 수 없다.

 

 

그래서 사용 빈도는 좀 떨어지지만 간편하게 자식 컴포넌트에 데이터를 보낼 때 가끔 사용한다.

 

사용법은 간단하다.

 

부모 컴포넌트에서 자식 컴포넌트의 태그 사이에 원하는 데이터(태그, 변수 등)를 넣어주면된다.

 

<ChildComponent>

    보내고싶은 태그와 데이터를 넣는다.

     ex) {{ data1 }}

 

     또는

 

     <span>{{ data2 }}</span>

</ChildComponent>

 

그리고 자식 컴포넌트에서 받고자하는 부분에

 

<slot></slot>

 

이렇게 해주면 끝.

 

 

근데 보내고싶은 slot이 다수일 때는,

 

<ChildComponent>

    <template v-slot:a>{{ data }}</template>

</ChildComponent>

 

이렇게 v-slot에 이름을 작명해서 보내면

 

<slot name="a"></slot>

 

이렇게 일치하는 이름으로 데이터를 받을 수 있다.

 

이 방법은 Named slot이라고 부른다.

 

 

 

반대로 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보낼 수 있다.

 

자식 컴포넌트에서 

 

<slot :dataFoo="dataFoo"></slot>

 

이렇게 이름을 작명해서 보내면

 

<ChildComponent>

    <template v-slot:default="dataFromChild">{{ dataFromChild.dataFoo }}</template>

</ChildComponent>

 

이렇게 받을 수 있는데, 자식 컴포넌트에서 오는 데이터들은 하나의 객체에 묶여서 오게된다.

 

따라서 default에 그 객체 이름을 작명해주고

 

{{  }} 사이에 객체 이름.자식 컴포넌트에서 보낸 slot :이름 으로 적어주면 

 

자식 컴포넌트에서 부모 컴포넌트로 전송된다.

 

이 방식은 Slot props라고하는데 별로 쓸일은 없다고한다.