Vue_slot

App

<template>

  <div>

    <HW mesg="Slot">

    <!-- html 태그를 전달할 경우 slot을 사용 -->

    <!-- slot영역 -->

    <div>아름다운 밤</div>

    <!-- slot영역 끝 -->

    </HW>

  </div>

</template>

<script>

import HW from './components/HW.vue'

export default {

    components:{

      HW,

    }

}

</script>

<style>

</style>

HW

<template>

  <div>

    <h1>{{ mesg }}</h1>

    <slot></slot>

</div>

</template>

<script>

export default {

  props:{

        mesg:String

  },

}

</script>

<style>

</style>

 

App에서 자식으로 간단히 입력