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

标签：slot vue default 插槽 SmallSlot export

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>

标签：slot,vue,default,插槽,SmallSlot,export
From： https://www.cnblogs.com/96net/p/18015985