Vue.js 공부 기록(12) - 슬롯(Slot) 개념, 사용법, 기본 예제

🔍슬롯(Slot)이란?

• 슬롯은 컴포넌트를 보다 디테일하게 활용할 수 있도록 하는 도구이다. (=기존 컴포넌트 재사용성을 높여줌)
• 컴포넌트에 콘텐츠 혹은 다른 컴포넌트를 또다른 방식으로 주입시킬 수 있는 방법

🔍슬롯 기본 예제

• Slot은 부모 컴포넌트에 특정 문법에 따라 쓰인 html 코드를 자식 컴포넌트에 보내는 역할을 함.

부모 컴포넌트인 About.vue에 아래 코드를 작성 한다.

그럼 자식 코드의 slot 태그 위치에

<slot></slot>

 해당 코드가 추가되어 로드된다.

만약 slot을 두 개 만들고 각기 다른 자리에 html 코드를 넣고 싶다면 slot에 이름을 붙여주면 된다.

그럼 header 이름을 가진 slot 태그에 해당 코드가 추가되며

만약 default로 지정할 경우 이름이 정해지지 않은 곳에 추가됨.

만약 부모 컴포넌트에서 자식 컴포넌트의 데이터를 사용하고 싶다면,

자식 컴포넌트의 slot에서 데이터를 올려주어야 한다.

그다음 부모 컴포넌트에서 해당 데이터를 가져다 쓰면 된다.

• 첫 번째 template 태그 코드는 자식 컴포넌트에서 올려놓은 값을 archive 변수에 넣겠다는 뜻이다.
• 들어온 데이터 객체를 변수명으로 가져다 쓸 수 있다.

code 가 알맞은 위치에 추가되었다.