[Vue] slot详解，slot、slot-scope和v-slot

slot是什么

slot，也称插槽，能够类比为插卡式的FC游戏机，游戏机（子组件）暴露卡槽（插槽）让用户插入不一样的游戏磁条（自定义内容），游戏机会读取并加载磁条里的游戏。
Vue的slot，是组件的一块HTML模版，这块模版由使用组件者即父组件提供。能够说是子组件暴露的一个让父组件传入自定义内容的接口。

slot的做用

让用户能够拓展组件，去更好地复用组件和对其作定制化处理。
举一些例子，好比布局组件、表格列、下拉选项

slot怎么用

slot的用法能够分为三类，分别是默认插槽、具名插槽和做用域插槽
子组件中：

• 插槽用<slot>标签来肯定渲染的位置，里面放若是父组件没传内容时的后备内容
• 具名插槽用name属性来表示插槽的名字，不传为默认插槽
• 做用域插槽在做用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件slot-scope接受的对象上。

// Child.vue
<template>
  <div>
    <main>
    <!-- 默认插槽 -->
        <slot>
          <!-- slot内为后备内容 -->
          <h3>没传内容</h3>
        </slot>
    </main>

    <!-- 具名插槽 -->
    <header>
        <slot name="header">
          <h3>没传header插槽</h3>
        </slot>
    </header>

    <!-- 做用域插槽 -->
    <footer>
        <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
        </slot>
    <footer>
  </div>
</template>

<style scoped> div{ border: 1px solid #000; } </style>
复制代码

父组件中在使用时：

• 默认插槽的话直接在子组件的标签内写入内容便可
• 具名插槽是在默认插槽的基础上加上slot属性，值为子组件插槽name属性值
• 做用域插槽则是经过slot-scope获取子组件的信息，在内容中使用。这里能够用解构语法去直接获取想要的属性

// Parent.vue
<child>
  <!-- 默认插槽 --> <div>默认插槽</div> <!-- 具名插槽 --> <div slot="header">具名插槽header</div> <!-- 做用域插槽 --> <div slot="footer" slot-scope="slotProps"> {{slotProps.testProps}} </div> </child>
复制代码

渲染结果为

v-slot

在vue2.6中，上述的API被软废弃（3.0正式废弃），取而代之的是内置指令v-slot，能够缩写为【#】

子组件用法保持不变，父组件中

• slot属性弃用，具名插槽经过指令参数v-slot:插槽名 的形式传入，能够简化为 #插槽名。
• slot-scope属性弃用，做用域插槽经过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性
• v-slot属性只能在<template>上使用，但在【只有默认插槽时】能够在组件标签上使用

//Parent
<template>
  <child>
   <!--默认插槽-->
   <template v-slot>
     <div>默认插槽</div>
   </template>
   <!--具名插槽-->
   <template #header>
     <div>具名插槽</div>
   </template>
   <!--做用域插槽-->
   <template #footer="slotProps">
     <div>
      {{slotProps.testProps}}
     </div>
   </template>
  <child>
</template>
复制代码

拓展用法：

1. 一样能够经过解构获取v-slot={user},
   还能够重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"
2. 插槽名能够是动态变化的 v-slot:[slotName]

注意：

1. 默认插槽名为default，能够省略default直接写v-slot，
   缩写为#时不能不写参数，写成#default（这点全部指令都同样，v-bind、v-on）
2. 多个插槽混用时，v-slot不能省略default

做用域插槽的原理

slot本质上是返回VNode的函数，通常状况下，Vue中的组件要渲染到页面上须要通过
template >> render function >> VNode >> DOM 过程。 组件挂载的本质就是执行渲染函数获得VNode，至于data/props/computed这些属性都是给VNode提供数据来源。

在2.5以前，若是是普通插槽就直接是VNode的形式了，而若是是做用域插槽，因为子组件须要在父组件访问子组件的数据，因此父组件下是一个未执行的函数 (slotScope) => return h('div', slotScope.msg) ，接受子组件的slotProps参数，在子组件渲染实例时会调用该函数传入数据。

在2.6以后，二者合并，普通插槽也变成一个函数，只是不接受参数了。

大纲速记：

仅做学习记录。若有错漏之处，敬请指正

参考

vue文档-插槽
如何理解Vue.js的组件中的slot？
v-slot由来 - RFC