vue插槽

具名插槽

<div>
  <slot name='hedaer'></slot>
</div>
<slotDemo>
  //简写  <template #header>
  <template v-slot::header>
  </template>
</slotDemo>

作用域插槽

<div>
  <slot :hello='hedaer' name='list'></slot>
</div>
<slotDemo>
  <template v-slot='scople'>
    //scople.name可以获得header的值
    {{scople.hello}}
  </template>
</slotDemo>

具名作用域插槽

<div>
  <slot :hello='hedaer' name='list'></slot>
</div>
<slotDemo>
  <template #list='scope'>
    {{scople.list}}
  </template>
</slotDemo>

匿名作用域插槽

<div>
  <slot :hello='hedaer' ></slot>
</div>
<slotDemo>
  <template #default='scope'>
    {{scope.hello}}
  </template>
</slotDemo>

标签：vue,作用域,插槽,具名,scople,hello
来源： https://www.cnblogs.com/gzeal/p/16394524.html