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>
