프로젝트가 끝나고 여유가 있는 기간이라 다른 사람들의 코드를 읽어보던 중 내가 사용하지 않던 방식으로 작성된 코드를 보게 됐다.
프로젝트 코드라서 실제 코드를 보여주진 못하지만 대략 아래와 같은 방식이었다.
ex)
<ComponentEx props~~~>
content
그래서 ComponentEx를 들어가보니 안에 slot태그라는 처음 보는 태그가 있어 공부하게 되었다.
1. 기본적인 사용 방식
위의 예시를 기준으로 얘기하자면 에 이라고 되어 있으면 content라는 내용이 slot에 들어가는 것이다.
샘플 코드를 보면 아래와 같다.
//부모
//자식
//로드된 페이지
다만 이게 slot태그 때문에 그런 것인지 아니면 index.vue에 자식 컴포넌트 사이에 있는 글씨를 인식해서 그런 것인지 궁금할 사람이 있을 거 같아 if를 걸어 slot때문인지 확인해 봤다.
(사실 아무도 안 궁금할 수 있지만 내가 궁금했다.)
//자식 컴포넌트
//로드된 페이지
이렇게 확인하니 slot때문에 index에서 작성한 내용이 자식 컴포넌트에 들어왔다는 것을 확인할 수 있었다.
궁금한 사람은 나처럼 v-if 걸지말고 그냥 슬롯 지우는 더 쉬운 방법도 있으니 해보시길.
2. 응용(2023.08.07 업데이트)
이제 어떻게 쓰는지 알았으면 이거 왜 쓰는지 알아야 하지 않을까 싶어서 알아봤다.
** 장점
1. props없이 데이터 바인딩 가능
2. html자체를 보낼 수 있음
3. slot props로 부모에서 자식 데이터 사용 가능
단점
1. 속성에 사용 불가
2. 여러 개의 데이터 바인딩 시 불편함**
*props 없이 데이터 바인딩
예를 들어 아래와 같은 부모, 자식 컴포넌트가 있다고 가정해 보자.
부모 컴포넌트
자식 컴포넌트
이렇게 되어 있을 때, 만약 <Temp1></Temp1> 사이에 tempData라는 변수를 넣어주면 화면에서 정상적으로 변수의 값이 보이는 것을 확인할 수 있다.
또한, 내가 여러 개의 슬롯에 여러 개의 데이터를 보내줘야한다면 아래와 같이 자식 컴포넌트 슬롯에 이름을 만들고 부모 컴포넌트에서 각각 슬롯에 맞게 템플릿을 작성하면 된다.
*html자체 보내기
이 방법은 특별할 것 없이 기존에 slot사용 방법에서 글자나 데이터를 넣던 부분에 html태그를 넣는 것이다. 기존 예시를 이어가면, 자식 컴포는 그대로 두고 부모 컴포넌트만 아래와 같이 변경하였다.
그러면 아래와 같이 적용된다.
