Vue.js - slot 문법

Vue.js에 대해서 적어보는 포스트입니다.

 

이번에는 제목처럼 slot 문법에 대해서 알아보겠습니다.

 

컴포넌트끼리 데이터를 전달하기 위해서,

특히 부모컴포넌트에서 자식컴포넌트로 데이터를 전달하려면

반드시 props를 사용해서 진행해야 합니다.

 

참고로 props 사용법입니다.

// 부모 컴포넌트
<Example :sendData="sendData"></Example>

// 자식 컴포넌트
// Example.vue
<script>
	export default {
    	name : 'ExampleComponent',
        props : {
        	sendData : Object,
        }
    }
</script>

부모 컴포넌트에서 전송하고, 자식 컴포넌트에서 받아서 사용합니다.

정확하게 단계로 알아본다면

1. 부모 컴포넌트에서 전송
2. 자식 컴포넌트에서 받기 + 등록
3. 자식 컴포넌트에서 사용

대략 3가지 단계입니다.

하지만 이런 단계들이 귀찮다고 여길 수도 있습니다.

 

이런 귀찮음을 해소해주는 문법이 바로 slot 문법입니다.

// 부모 컴포넌트
<Example>테스트</Example>

// 자식 컴포넌트 - Example.vue

<template>
	<div>
    
    	...
        
        <slot></slot>
        
        ...
        
    </div>
</template>

<script>
	export default {
    	name : 'ExampleComponent',
    }
</script>

예시로 slot 문법을 사용해봤습니다.

• 자식 컴포넌트 : 데이터가 나타나야 하는 곳에 slot태그를 넣습니다.
• 부모 컴포넌트 : <자식컴포넌트>데이터</자식컴포넌트> 형식으로 보냅니다.
• 그러면 부모 컴포넌트에서 설정한 데이터가 자식 컴포넌트에서 바로 보여집니다.
  → props 문법은 사용하지 않아도 됩니다.
• 참고로 저렇게 코드 작성을 해서 실행해본다면 슬롯 자리에 '테스트' 라고 적혀 있을 것입니다.

 

props 문법보다 쉽게 사용할 수 있음을 알 수 있습니다.

하지만, slot 문법은 props 문법을 완전히 대체하지 못합니다.

그 이유는 slot 문법은 HTML 태그처럼만 사용할 수 있기 때문입니다.

// 자식 컴포넌트 - Example.vue
<template>
	<div>
    
    	...
        
        <div :class="${propsData1}" :style="${propsData2}"></div>
        
        ...
        
    </div>
</template>

만약 넘어온 데이터가 class에서(혹은 style) 사용되어야 하는 경우 어떨까요?
(즉, 속성 값으로 사용되는 경우)

props 문법을 사용했다면 문제없지만, slot 문법을 사용하면 어떻게 할 방법이 없습니다.

그렇기 때문에 slot 문법만 사용해서 코딩을 진행할 수 없습니다.

 

앞의 예시로는 1개의 데이터만 전달합니다.

하지만 코딩을 하다보면 자식 컴포넌트로 여러 개의 데이터를 전달해야 하는 경우도 있습니다.

그럴 때는 다음과 같이 진행합니다.

// 부모 컴포넌트
<Example>
	<template v-slot:name1>테스트1</template>
	<template v-slot:name2>테스트2</template>
</Example>

// 자식 컴포넌트 - Example.vue

<template>
	<div>
    
    	...
        
        <slot name="name1"></slot>
        <slot name="name2"></slot>
        
        ...
        
    </div>
</template>

<script>
	export default {
    	name : 'ExampleComponent',
    }
</script>

• 부모 컴포넌트에서는 <template v-slot:{이름}>{데이터}</template> 로 작성합니다.
  • {이름}은 본인이 원하는 이름을 작성합니다. 단, 겹치지 않게 작성합니다.
  • {데이터}에는 보내고자 하는 데이터를 넣습니다.
• 자식 컴포넌트에서는 <slot name="{이름}"></slot> 로 작성합니다.
• 이렇게 한다면 이름에 맞게 데이터가 넘어가게 됩니다.

 

여기서 감이 오셨을 수도 있는데

보내야 할 데이터가 많다면 slot 문법을 이용하는게 그다지 좋지 않을 수도 있습니다.

10개를 보내야 한다면 10개를 다 작성해야 하니까요.

 

 

slot 문법을 사용할 때 괜찮은 점은 하나 더 있습니다.

HTML 태그를 이용해서 같이 전송이 가능하다는 것입니다.

// 부모 컴포넌트
<Example>
	<span>테스트</span>
</Example>

// 자식 컴포넌트 - Example.vue

<template>
	<div>
    
    	...
        
        <slot></slot>
        
        ...
        
    </div>
</template>

<script>
	export default {
    	name : 'ExampleComponent',
    }
</script>

제가 넘길 데이터를 span 태그에 감싸서 표현했습니다.

그러면 자식 컴포넌트에서 span 태그에 감싸진 형태로 표현이 됩니다.

• 즉, slot 자리에 <span>테스트</span>가 들어가게 됩니다.
• HTML 태그가 같이 넘어가기 때문에 활용을 더 해 볼 여지가 있습니다. ㅋㅋ

 

 

==================================================================================

마지막으로(부가적으로) 알아볼 것은 slot props 입니다.
(사실 여기는 크게 중요하지 않기 때문에 넘기셔도 됩니다.)

부모 컴포넌트에서 자식 컴포넌트의 데이터를 사용하고 싶을 때 진행하면 됩니다.

// 부모 컴포넌트
<Example>
	<template v-slot:default="test">{{test.test1}}</template>
</Example>

// 자식 컴포넌트 - Example.vue

<template>
	<div>
    
    	...
        
        <slot :test1="test1"></slot>
        
        ...
        
    </div>
</template>

<script>
	export default {
    	name : 'ExampleComponent',
        data() {
        	return {
            	test1 : "test1",
            }
        },
    }
</script>

예시 코드를 작성해봤습니다.

• 자식 컴포넌트에서는 :test1="test1" 을 slot 태그 안에 추가해서 부모 컴포넌트로 전송할 수 있게 합니다.
• 부모 컴포넌트는 이것을 사용하기 위해
  <template v-slot:default="test">{{test.test1}}</template> 라고 작성합니다.
  
  • v-slot:defalut를 이용해서 진행합니다.
  • default 옆에는 본인 맘대로 작명하면 됩니다.
• 이렇게 하면 화면에서 slot 자리에 test1이 잘 나오게 될 것입니다.
  • 참고로 <template v-slot:defalut="test">{{test}}</template> 라고 적으면?
    → { "test1": "test1" } 이 나오게 됩니다.

slot props 문법에 대해서 알아봤는데..

사용할 일이 별로 없어보입니다.

그리고 실제로도 잘 사용되지 않는다고 합니다..

==================================================================================

 

 

이렇게 slot 문법에 대해서 알아봤는데요.

slot 문법을 쓰는 경우에 대해 정리해보겠습니다.

1. 간단하게 쓰고 싶을 때
   • props가 너무 쓰기 싫을 때, 간단하게 작성하고 싶다면 사용해보면 될 것 같습니다.
2. HTML 태그 사용을 할 때
   • slot 자리에 HTML 태그가 그대로 들어가기 때문에
   • 부모 컴포넌트에서 span, div 같은 태그로 감싸서 보낸다면 활용도가 높다고 생각합니다.

 

 

이렇게 slot 문법에 대해서 알아봤습니다.

 

 

여담)

사실 이 글 작성한 지는 꽤 됐는데

까먹고 있다가 이제야 완성해서 올립니다.

slot에 대해서 다시금 생각나게 되었습니다.

 

 

 

 

 

출처 : 코딩애플 - 인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드