子组件可以设置插槽名，父组件：[slot Name] 指定用的哪一个插槽 ；="slotProps" 获取到子组件的所有属性的对象数据，因为是对象，也可以使用es6的解构赋值
父组件：
<template v-slot:header>header内容</template>
<!-- <template v-slot:default="slotProps">{{ slotProps.user.name }} {{slotProps.food}}11</template> -->
<!-- <template v-slot="slotProps">{{ slotProps.user.name }} {{slotProps.food}}11</template> -->
<!-- 可以使用 ES2015 解构来传入具体的插槽 prop -->
<!-- <template v-slot:default="{user, food}">{{ user.name }} {{food}}11</template> -->
<!-- 在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person -->
<!-- <template v-slot:default="{user:person, food}">{{ person.name }} {{food}}11</template> -->
<!-- 有bug！！无法修改子组件的值,,,(可以定义后备内容，用于插槽 prop 是 undefined 的情形)： -->
<!-- <template v-slot="{user={age:'1333'}, food}">{{ user.age }} {{food}}11</template> -->
<!-- <template v-slot:footer>footer内容</template> -->
<!-- [] 来定义动态的插槽名： -->
<template v-slot:[slotName]>default</template>
子组件：
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<!-- 在子组件使用v-bind 可以将子组件的值传给父组件 -->
<slot :user="user" food="apple" >main内容</slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
