vue slot 사용법

vue.js에서 부모 컴포넌트에서 자식 컴포넌트 내부의 데이터를 추가하고 싶은 경우, <slot></slot>을 사용하면 된다.

App.vue

App.vue에서 아래 있는 Quote 컴포넌트를 호출하여 해당 컴포넌트에 <h2> 태그를 넣어보자.

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
				<app-quote>
					<h2>Quote</h2>
					<p>Test</p>
				</app-quote>
            </div>
        </div>
    </div>
</template>

<script>
import Quote from './components/Quote.vue';

    export default {
		components: {
			appQuote: Quote
		}
    }
</script>

<style>
</style>

Quote.vue

temlpate 안에 <slot></slot>을 추가 해 주면 자동으로 데이터가 들어온다.

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

<script>
export default {
}
</script>

Scope 특징

1. Style은 자식 컴포넌트에서만 적용된다.

위의 <h2>Quote</h2>에 스타일을 적용시키고 싶다면 자식 컴포넌트인 Quote.vue에서 style을 적용시켜야만 적용된다.

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

<script>
export default {
}
</script>

<style>
h2 {
	color: red;
}
</style>

2. 나머지 모든 것은 일반적인 vue와 동일하게 사용할 수 있다.

위의 style을 제외한 모든 데이터 바인딩, 메쏘드 등은 부모 컴포넌트에서 동일하게 사용 가능하다.

slot을 나누어서 표시하려면?

slot에 name을 주고, 부모 컴포넌트에서 slot attribute를 준다.

이름을 지정하지 않으면 default slot.

Quote.vue

<template>
	<div>
		<div class="title">
			<slot name="title"></slot>
		</div>
		<hr>
		<div class="content">
			<slot name="content"></slot>
		</div>
	</div>
</template>

App.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
				<app-quote>
					<h2 slot="title"></h2>
					<p slot="content">Test</p>
				</app-quote>
            </div>
        </div>
    </div>
</template>