slot插槽
默认插槽
具名插槽
作用域插槽
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
<my-component>
<template v-slot:header>
这里是头部内容
</template>
<template v-slot:default>
这里是主体内容
</template>
<template #footer>
这里是底部内容
</template>
</my-component>
<div>
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item"></slot>
</li>
</ul>
</div>
<my-component :items="itemsList">
<template v-slot:default="{ item }">
{{ item.name }} - ${{ item.price }}
</template>
</my-component>
