vue slot(插槽)的使用

1. 默认插槽

// 首先创建一个组件名字为 con-b,并写入插槽标签
<template>
  <div>
    <slot></slot> // 如果这里有内容,父组件没有插入内容 咋会展示默认的内容
  </div>
</template>

// 然后在父组件使用组件: con-b,并将内容插入到子组件
<con-b>123</con-b>   //插入的内容会覆盖子组件默认的内容

2. 具名插槽

// 首先在子组件写入对应名字的插槽
<slot name="top"></slot>
<slot name="bottom"></slot>
<div slot="bottom"></div>
<slot></slot>

// 然后在父组件的子组件内写入对于插槽内容:
<con-b>
      <template v-slot:top>
        <h3>top</h3>
      </template>
      <template v-slot:bottom>
      bottom
      </template>
      111    // 这里没有使用具名插槽的会默认插入在子组件的<slot></slot>中,
      		 // 也相当具名插槽的简写: v-slot:default
    </con-b>

3. 作用域插槽

当需要在父组件对子组件的数据做处理的时候可以用到作用域插槽:

// 先在子组件定义一个数据,并通过v-bind绑定在slot标签上:
<template>
  <div>
    <h1>组件2</h1>
    <slot  :user="obj">{{obj.name}}</slot>
  </div>
</template>
<script>
export default {
  name: 'conB',
  data () {
    return {
      obj: {
        name: '小明',
        age: 18
      },
    }
  },
}
</script>

// 然后在父组件通过v-slot 来定义我们提供的插槽的名字：
// 当只有默认插槽时,可以不使用template模板,直接将v-slot:default = "info"直接写在组件标签内
<con-b>      
// 这里等同于具名插槽,这里的default是可以省略的, 如果子组件中有具体的插槽名称,这里需要对应
     <template v-slot:default = "info">  
// info是子组件中所有通过插槽传递过来的值的对象											
// 同时有多个插槽时,需要写完整的template模板和插槽名称 														
       {{info.user.name='小张'}}
     </template>
 </con-b>

4. 作用域插槽传值解构

// 作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里：
function (slotProps) {
  // 插槽内容
}
// 所以可以通过解构简化:
 <con-b v-slot:default = "{user}"> 
       {{user.name='小张'}}
    </con-b>
 // 也可以重新命名:
  <con-b v-slot:default = "{user:info}">
     {{info.name = '小张'}}
  </con-b>

5. 动态插槽名

// 最后可以通过v-slot:[dynamicSlotName]定义动态插槽名
<template v-slot:[dynamicSlotName]>
    ...
  </template>
// 然后在data中定义dynamicSlotName,通常在子组件中有多个具名插槽时,可以通过这种方式,实现根据需要动态绑定插槽

6. 插槽的缩写

// 跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。
// 例如 v-slot:header 可以被重写为 #header：
// 当是默认插槽,也就是v-slot:default时   简写为#default ,
// 同理作用于插槽解构写法:#default="{ user }"