vue插槽，分分钟理解

1、默认插槽，父组件调用子组件得时候，没有传值，默认显示插槽里面得值。如果父组件传值了，那就显示父组件得内容

父组件:
<template>
    <div>
      <span class="bold">默认插槽:子组件标签里没写东西，默认显示</span>
      <slotCom></slotCom>
      <slotCom>不默认 &nbsp;&nbsp;&nbsp;</slotCom>
    </div>
</template>

子组件：
<template>
  <div>
      <slot>默认</slot>
  </div>
</template>

渲染结果

2、具名插槽：具体修改某一个插槽的内容

具名插槽可以用#代替v-slot

父组件:
<template>
    <div>
      <span class="bold">具名插槽:具体修改某一项</span>
      <slotCom>
        <template v-slot:header>header</template>
      </slotCom>
       =
      <slotCom>
        <template #header>header</template>
      </slotCom>
    </div>
</template>

子组件：
<template>
  <div>
      <slot>默认</slot>
      <slot name="header">头部</slot>
  </div>
</template>

渲染结果：

3、作用域插槽:父组件显示子组件的值

子组件用v-bind传给出去，父组件用v-slot接收

如果子组件只v-bind一个值，父组件就用v-slot:default="啥啥啥"或者直接v-slot="啥啥啥" ，如下所示：

父组件:
<template>
    <div>
      <span class="bold">作用域插槽:父组件显示子组件的值，并且子组件只传一个值</span>
      <slotCom>
        <template v-slot:default="slotProps">{{slotProps.userData.firstName}} &nbsp;&nbsp;&nbsp;</template>
      </slotCom>
      = 
      <slotCom>
        <template v-slot="slotProps">{{slotProps.userData.firstName}} &nbsp;&nbsp;&nbsp;</template>
      </slotCom>
    </div>
</template>

子组件：
<template>
  <div>
      <slot v-bind:userData="user">
        {{ user.firstName}}
      </slot>
  </div>
</template>

<script>

export default {
  data(){
    return {
        user:{
          firstName: 'gerace',
          lastName: 'haLi',
        },
        hobby:{
          fruit: "apple",
          color: "blue"
        }
    }
  }
}
</script>

如果子组件传多个值：

父组件:
<template>
    <div>
      <span class="bold">作用域插槽:父组件显示子组件的值，并且子组件只传多个值</span>
普通方式：
      <slotCom>
        <template v-slot:header="slotProps">
          {{ slotProps.userData.firstName }}-{{slotProps.hobbyDataa.fruit}}
        </template>
        <template v-slot:footer="slotProps">
          {{ slotProps.hobbyData.fruit }}
        </template>
      </slotCom>
      =
解构插槽prop：
      <slotCom>
        <template v-slot:header="{userData}">
          {{ userData.firstName }}
        </template>
        <template v-slot:footer="{hobbyData}">
          {{ hobbyData.fruit }}
        </template>
      </slotCom>
      =
作用域插槽，只有当解构插槽prop的时候，v-slot也可以用#代替
      <slotCom>
        <template #header="{userData}">
          {{ userData.firstName }}
        </template>
        <template #footer="{hobbyData}">
          {{ hobbyData.fruit }}
        </template>
      </slotCom>
    </div>
</template>

子组件：
<template>
  <div>
      <slot v-bind:userData="user" v-bind:hobbyDataa="hobby" name="header">
        {{ user.firstName }}
      </slot>
      <slot v-bind:hobbyData="hobby" name="footer">
        {{ hobby.fruit }}
      </slot>
  </div>
</template>

<script>

export default {
  data(){
    return {
        user:{
          firstName: 'gerace',
          lastName: 'haLi',
        },
        hobby:{
          fruit: "apple",
          color: "blue"
        }
    }
  }
}
</script>