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>
posted @ 2024-02-15 09:47  学无边涯  阅读(19)  评论(0编辑  收藏  举报