slot

slot

https://ryuzuka.github.io/VUE/tutorial/11_slot.html

• slot

컨텐츠 배포 - 자식 컴포넌트의 지정된 <slot> 위치에 부모 컴포넌트의 컨텐츠가 삽입된다.

 - 부모 컴포넌트가 비어있고 <slot> 내부에 컨텐츠가 존재하면 <slot> 자체의 컨텐츠가 렌더링 된다. - 대체 컨텐츠

 - 하위 컴포넌트 템플릿에 최소한 하나의 <slot> 콘텐츠가 포함되어 있지 않으면 부모 콘텐츠가 삭제된다.

 - 상위 템플릿의 모든 내용은 상위 범위로 컴파일된다. 하위 템플릿의 모든 내용은 하위 범위에서 컴파일된다.

<div id="app">

<post>

컨텐츠 배포 - 컴포넌트의 마크업 확장

</post>

</div>

<script>

Vue.component( 'post', {

template: `

<div>

<p>

<slot></slot>

</p>

</div>

`

});

new Vue({

el: '#app'

});

</script>

• 이름을 가지는 slot

자식 컴포넌트에 <slot name="..."> 속성을 지정하고 부모 컴포넌트의 마크업에 slot="..." 속성을 지정하면 해당하는 <slot> 위치에 렌더링 된다.

<div id="app">

<post>

<h3 slot="title">{{ title }}</h3>

<p slot="contents">{{ contents }}</p>

</post>

</div>

<script>

Vue.component( 'post', {

template: `

<div>

<slot name="title"></slot>

<slot name="contents"></slot>

</div>

`

});

new Vue({

el: '#app',

data: {

title: '이름을 가지는 slot',

contents: '일치하는 name 속성값을 가진 slot위치로 렌더링 된다.'

}

});

</script>

• 범위를 가지는 slot

범위를 가지고 있는 <slot v-for="..."> 의 경우 <template scope="..."> 통해 처리할 수 있다.

<div id="app">

<scope-component>

<template scope="fruits">

<li>{{ fruits.fruitName }}: {{ fruits.price }}</li>

</template>

</scope-component>

</div>

<script>

Vue.component( 'scope-component', {

template: `

<div>

<ul>

<slot v-for="item in fruits" :fruit-name="item.name" :price="item.price"></slot>

</ul>

</div>

`,

data: function () {

return {

fruits: [

{

name: 'Apple',

price: 1500

},

{

name: 'Banana',

price: 900

}

]

};

}

});

new Vue({

el: '#app',

});

</script>