vue插槽总结

子组件可以设置插槽名，父组件：[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>