案例分析vue中$slot和$scopedSlots的區別

0. 版本描述： 
       vue 2.6.11

1. 代碼分析

// Test.vue
<template>
  <div>
    <slot name="header" :test="test" />
    <slot :test="test" />
    <slot name="footer" :test="test" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      test: { name: "default" }
    };
  },
  mounted() {
    console.log(this.$slots, "$slots");
    console.log(this.$scopedSlots, "$scopedSlots");
  }
};
</script>

情景一 header、default、footer 都是作用域插槽

<template>
  <test>
    <template #header="{test}">
      <div>slot: header. {{ test }}</div>
    </template>
    <template #default="{test}">
      <div>slot: scope. {{ test }}</div>
    </template>
    <template #footer="{test}">
      <div>Here's some contact info. {{ test }}</div>
    </template>
  </test>
</template>

情景分析二 header、footer 是作用域插槽

<template>
  <test>
    <template #header="{test}">
      <div>slot: header. {{ test }}</div>
    </template>

    <div>slot: scope.</div>

    <template #footer="{test}">
      <div>Here's some contact info. {{ test }}</div>
    </template>
  </test>
</template>

 情景三 footer 是作用域插槽

<template>
  <test>
    <template #header>
      <div>slot: header.</div>
    </template>

    <div>slot: scope.</div>

    <template #footer="{test}">
      <div>Here's some contact info. {{ test }}</div>
    </template>
  </test>
</template>

　　

推導結論：

　　$slots 是非作用域插槽集合
　　$scopedSlots 是插槽的集合

      沿用官網的話吧 `推薦始終通過 $scopedSlots 訪問它們`