Vue - 컴포넌트 slot

 

만약 컴포넌트 태그 사이에 텍스트를 넣게되면 어떻게 될까?

위 처럼 slot 태그를 컴포넌트에서 넣어줘야 컴포넌트 태그사이에 넣었던 텍스트를 출력할 수 있다.

 

그럼 만약 slot 태그 사이에 텍스트를 넣게되면 어떻게 될까?

만약 컴포넌트태그 사이에 아무런 텍스트도 넣지않게 되었을 때 위에 작성한 텍스트가 사용된다.

이를 Fallback 콘텐트라고 한다.

 

 

슬롯에 이름을 지정해서 요소를 나눠서 출력가능!

- 위 노란색 오류는 약어를 사용하라는 알림이다.

- 아래와 같이 사용한다.

 

 

이름을 지정할 때 만약 슬롯이 하나만 있으면 해당 슬롯의 이름은 default이다.

슬롯에 데이터를 지정해 부모 컴포넌트로 끌어올릴 수 도 있다.

이는 Hello 컴포넌트 내에서 해당되는 요소 내에서만 사용가능하다.