vue 具名插槽slot 用法

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>

    <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"></slot>

</template>

<script>

 export default {

 }

</script>

<style>

</style>