slot简单的理解及用法

在2.6.0版本以后，具名插槽 和 作用域插槽 引入了一个新的统一的语法 (即v-slot 指令),他取代了原有的slot和slot-scope,网上的版本与官方文档比较难理解自己整理了一下.

slot可以理解为"挖坑"在组件中挖好坑等着调用该组件的时候去填上这个'坑'

内容插槽

定义两个组件app.vue和son.vue
在app.vue中引用son.vue

//app.vue
<son>
Hello Word!
</son>

//son.vue
<h>
<slott> 默认显示 <slot>
</h>

当渲染的时候son.vue中的<slott> 默认显示 <slot>会被Hello Word!代替

当然插槽也可以有多个,当存在多个插槽的时候就需要用到具名插槽,具体的原理就是在子组件(son.vue)中用slot"挖多个坑"并且每个坑都附上名字,在父组件(app.vue)调用的时候用v-slot:xx,附上对应的名字,简单来说就是"一个萝卜一个坑"要对应上

<template>
  <div>
    <h2>子组件</h2>
    <slot name="one">默认内容 </slot>
     <slot name="two">默认内容 </slot>
  </div>
</template>

<app>
 
  <template v-slot:two>
    <h2>two组件</h2>
  </template>
  <h1>自定义组件</h1>
  <template #one>
    <h2>one组件</h2>
  </template>
</app>

当页面渲染的时候父组件中的h2标签one组件 two组件会替换子组件中对应名字的"默认内容"具体显示如下

作用域插槽

如果想访问son作用域我们把需要传递的内容绑到 <slot> 上，然后在父组件中用v-slot设置一个值来定义我们提供插槽的名字

<template>
  <div>
    <h2>子组件</h2>
    <slot name="one" :girl="item" :loveName="item.name" :img="item.headImgUrl">默认内容 </slot>
    
  </div>
</template>

slot中上传数据在app.vue中用"scope"来接收

<app>
  <h1>自定义组件</h1>
  <template v-slot:one ='scope'>
    <h2>one组件</h2>
  </template>
</app>