Slot

내가 생각했던 slot과는 괴리감이 있다보니, 정리를 위해서 한번 다시금 정리해보려고 한다.

Simple한 구조

기본적으로 Vue에서 컴포넌트를 사용하기 위해서는 HTML 태그와 유사한 방법으로 사용됩니다.

<template>
	<ExampleComponent></ExampleComponent>
</template>

위와 같은 형식으로 사용됩니다.
보통은 HTML 태그 안에 컨텐츠를 넣을 때는 ></안에 넣을 때가 많습니다.
slot 자체는 저 해당 내부에 넣으려고 할 때, 만약 컴포넌트라면? 해당 위치에 넣어줘라 라는 것입니다.
즉,

<template>
	<ExampleComponent<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="266px" height="381px" viewBox="-0.5 -0.5 266 381"><defs/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="2"><g><rect x="0" y="0" width="265" height="380" rx="39.75" ry="39.75" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 263px; height: 1px; padding-top: 190px; margin-left: 1px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 24px;">App.vue</font><div><font style="font-size: 24px;"><br /></font></div><div><font style="font-size: 24px;"><br /></font></div><div><font style="font-size: 24px;"><br /></font></div><div><font style="font-size: 24px;"><br /></font></div><div><font style="font-size: 24px;"><br /></font></div><div><font style="font-size: 24px;"><br /></font></div><div><font style="font-size: 24px;"><br /></font></div><div><font style="font-size: 24px;"><br /></font></div><div><font style="font-size: 24px;">...</font></div></div></div></div></foreignObject><text x="133" y="194" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">App.vue...</text></switch></g></g></g><g data-cell-id="3"><g><rect x="0" y="120" width="265" height="70" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 263px; height: 1px; padding-top: 155px; margin-left: 1px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 20px;">HelloWorld.vue</font></div></div></div></foreignObject><text x="133" y="159" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">HelloWorld.vue</text></switch></g></g></g><g data-cell-id="4"><g><rect x="0" y="190" width="265" height="70" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 263px; height: 1px; padding-top: 225px; margin-left: 1px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 20px;">Router View.vue</font></div></div></div></foreignObject><text x="133" y="229" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Router View.vue</text></switch></g></g></g></g></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>>
		여기 사람 살아요~
	</ExampleComponent>
</template>

!Image/BackEnd/NodeJS/NestJS/Nest Middleware/Diagram.svg
위 그림과 같이 설명이 됩니다.

Slot에서 함수와 데이터 전달에 대한 부분

!Image/BackEnd/NodeJS/NestJS/JWT 인증,인가/Diagram 1.svg

실제 MyComponent.vue에서 함수를 만든 뒤에

#Vue #Vue2 #FrontEnd #JavaScript #Vue3