Vue2.6插槽v-slot是如何使用的

slot种类：

　　匿名插槽、具名插槽、作用域插槽

子组件ChildrenHasSlot.vue:

<template>
  <div>
    我是子组件ChildrenHasSlot.vue
    <slot>我是默认值</slot>
    <slot name="chacaoB">我是chacaoB默认值</slot>
    <slot name="chacaoC" :data1="data1" :data2="data2">我是chacaoC默认值</slot>
    <slot name="chacaoD" :data1="data1" :data2="data2">我是chacaoD默认值</slot>
  </div>
</template>

<script>
export default {
  name: "ChildrenHasSlot",
  data() {
    return {
      data1: {
        a: 111,
        b: 222
      },
      data2: {
        c: 333,
        d: 444
      }
    }
  }
}
</script>

父组件ParentDemoSlot.vue 

<template>
  <div>
    <ChildrenHasSlot>

      <!-- 匿名插槽 -->
      <template v-slot:default>
        <h4>这是插入'默认'插槽的内容</h4>
      </template>

      <!-- 具名插槽 -->
      <template v-slot:chacaoB>
        <h4>这是插入插槽B的内容</h4>
      </template>

      <!-- 作用域插槽 -->
      <template v-slot:chacaoC="slotProps">
        <h4>这是插入插槽C的内容</h4>
        <h4>{{slotProps}}</h4>
        <h4>data1数据：{{slotProps.data1}}</h4>
        <h4>data2数据：{{slotProps.data2}}</h4>
      </template>

      <!-- 作用域插槽 解构slot传值 -->
      <template v-slot:chacaoD="{data1,data2}">
        <h4>这是插入插槽D的内容</h4>
        <h4>data1数据：{{data1}}</h4>
        <h4>data2数据：{{data2}}</h4>
      </template>

    </ChildrenHasSlot>
  </div>
</template>

<script>
import ChildrenHasSlot from "@/components/ChildrenHasSlot";

export default {
  name: "ParentDemoSlot",
  components: {
    ChildrenHasSlot
  },
  data() {
    return {}
  }
}
</script>

1. 匿名插槽：

子组件定义占位：

<slot>我是默认值</slot>

父组件使用：

方式1：

<template v-slot:default>
 <h4>这是插入'默认'插槽的内容</h4>
</template>

等价于

方式2：defalut可以省略，加上只是为了更直观理解

<template v-slot>
 <h4>这是插入'默认'插槽的内容</h4>
</template>

2. 具名插槽（有具体名字的插槽）：

子组件定义占位：

<slot name="chacaoB">我是chacaoB默认值</slot>

父组件使用：

<template v-slot:chacaoB>
  <h4>这是插入插槽B的内容</h4>
</template>

3.作用域插槽（可从子组件插槽传值到父组件插槽使用处）：

子组件定义占位：

<slot name="chacaoC" :data1="data1" :data2="data2">我是chacaoC默认值</slot>

父组件使用：

<template v-slot:chacaoC="slotProps">
  <h4>这是插入插槽C的内容</h4>
  <h4>{{slotProps}}</h4>
  <h4>data1数据：{{slotProps.data1}}</h4>
  <h4>data2数据：{{slotProps.data2}}</h4>
</template>

TIPS: slotProps的名字不是必须的指定的名称，可以DIY

当然也可以用ES6的解构出这些数据这样：

<template v-slot:chacaoD="{data1,data2}">
  <h4>这是插入插槽D的内容</h4>
  <h4>data1数据：{{data1}}</h4>
  <h4>data2数据：{{data2}}</h4>
</template>

TIPS：slotProps代表子组件通过插槽传递的所有data数据，因为我们传递了2个分别是data1、data2，所以，slotProps是这样的:
{ "data1": { "a": 111, "b": 222 }, "data2": { "c": 333, "d": 444 } }