vue3 slot三种插槽使用，与作用域插槽传值

一，默认插槽和具名插槽

// 子组件
<template>
  // 匿名插槽
  <slot/>
  // 具名插槽
  <slot name='title'/>
</template>

// 父组件
<!-- 具名插槽 -->
<template #default>
  <div class="tab-header">
    <span>默认插槽</span>
  </div>
</template>

<template #title>
  <div class="tab-header">
    <span>角色列表</span>
    <el-button class="fr" type="primary">新增角色</el-button>
  </div>
</template>

 

二. 作用域插槽

// 子组件
<template  #default="scope">
    <slot name="num" :row="scope.row"></slot>
</template>

// 父组件
<template v-slot:num="row">
   <div @click="look(scope)">查看</div>
</template>