（十八）补充-Vue3中插槽的使用

本章我们将了解到的是vue3中常用插槽的使用；

vue3中的插槽是在用的时候和vue2的区别略有不同，常见插槽使用中主要体现在具名插槽上。
1、vue3中新增了v-slot来代替vue2中的slot等属性。
2、在普通插槽中使用：

// page-layout 组件模板
el-container
  el-main
    slot
  

// 匿名插槽（默认插槽）使用
page-layout
  el-table(:data="tableData" height="100%")
    el-table-column(prop="date" label="日期" width="180")
    el-table-column(prop="name" label="姓名" width="180")
    el-table-column(prop="address" label="地址")

结果会将el-table的内容渲染到组件模板中的el-main中。它还有另一种写法：

// 匿名插槽（默认插槽）使用
page-layout
  template(v-slot)
    el-table(:data="tableData" height="100%")
      el-table-column(prop="date" label="日期" width="180")
      el-table-column(prop="name" label="姓名" width="180")
      el-table-column(prop="address" label="地址")

此种写法就是vue3中新增的插槽指令，它还有另一种写法：

// 匿名插槽（默认插槽）使用
page-layout
  template(#) // Vue3中的新写法
    el-table(:data="tableData" height="100%")
      el-table-column(prop="date" label="日期" width="180")
      el-table-column(prop="name" label="姓名" width="180")
      el-table-column(prop="address" label="地址")

此种写法类似于v-on简写于@，v-bind简写于：,v-slot也有简写：#。
3、在具名插槽中使用，
可以通过给v-slot指令增减一个参数名称来指定具体的某一个插槽（具有name属性的插槽）

el-container.h100.layout-page
  el-header.flex
    slot(name="top-left")
    slot(name="top-right")
  el-main
    slot
  el-footer.flex
    slot(name="bottom")

在此组件中就包含了已给匿名插槽以及，name分别为"top-left","top-right","bottom"的三个具名插槽。

page-layout.page-layout-box
  template(#top-left)
    div
      el-button(type="primary") 测试按钮1
      el-button(type="primary") 测试按钮2
  template(#top-right)
    div
      el-button(type="primary") 测试按钮3
      el-button(type="primary") 测试按钮4
  template(#)
    el-table(:data="tableData" height="100%")
      el-table-column(prop="date" label="日期" width="180")
      el-table-column(prop="name" label="姓名" width="180")
      el-table-column(prop="address" label="地址")
  template(#bottom)
    el-button(type="primary") 测试按钮5

那么我们在使用的时候直接使用插槽的简写来对指定的插槽指定要渲染的内容。

下一章：（十九）setup 语法糖应用
上一章：（十七）Vue3.x使用provide/inject来代替vuex的实现方式

ps：未经他人事，勿劝他人善！