vue 子组件为插槽slot提供内容

app.vue

<template>

 <h1>插槽知识</h1>

 <SmallSlot>

  <template #header>

    <div>

    <ul>

      <li>1</li>

      <li>2</li>

      <li>3</li>

    </ul>

  </div>

  </template>

  <template #main="slotProps">

    <h3>{{ slotProps.msg }}</h3>

    <div>

    <ul>

      <li>10</li>

      <li>20</li>

      <li>30</li>

    </ul>

  </div>

  </template>

 </SmallSlot>

</template>

<script>

import SmallSlot from './components/SmallSlot.vue'

export default{

  components:{

    SmallSlot

  }

}

</script>

SmallSlot.vue

 

<template>

   <slot name="header"></slot>

   <a href="">123</a>

   <slot name="main" :msg="amessge"></slot>

</template>

<script>

 export default {

    data(){

        return{

            amessge:'hello'

        }

    }

 }

</script>

<style>

</style>