vuejs 범위슬롯에 자식컴포넌트 데이터 전달하기

이 페이지는 여러분이 이미 컴포넌트 기초를 읽었다고 가정하고 쓴 내용입니다. 컴포넌트가 처음이라면 기초 문서를 먼저 읽으시기 바랍니다.

VUE.JS 2.6+ > 컴포넌트 톺아보기 > 슬롯(Slots) > 범위가 있는 슬롯

일반적으로 슬롯은 부모컴포넌트의 데이터로 렌더링 되어 자식컴포넌트의 슬롯영역에 렌더링 되어진다. 자식영역의 데이터로 렌더링하기 위해서는 slot태그에 자식영역의 데이터를 바인드하여 부모 slot영역에서 참조할 수 있다.

//childComponent.vue
<template>
  <div>
    <div>{{ child-component }}</div>
    <slot :message="message"></slot>
  </div>
</template>
<script>
export default {
  data: () => ({
  	message: "hello!"
  })
}
  
//parentComponent.vue
<template>
  <child-component v-slot="{ message }">{{ message }}</child-component>
</template>
<script>
import childComponent from "./childComponent.vue";
export default {  
  components: { childComponent }
}
</script>