1. vue 2.6.0版本之前的slot插槽： 用slot='' 替代表示對應的插槽。

<!--1.插槽元件中： 匿名插槽和具名插槽-->
<div>
    <slot></slot>
    <slot name='content'></slot>
</div>
 
<!--2. 使用插槽元件：-->
<child>
    <div></div>
    <div slot='content'></div>
</child>

2. vue 2.6.0版本之後的slot插槽： 用v-slot:default='ctx' 替代slot=''。

<!--1. 在slot插槽元件中：匿名插槽和具名插槽 以及向外拋值-->
<div class="test-slot">
     <slot :data1='data1'></slot>
     <slot name='main' :data2='data2'></slot>
</div>
<script>
export default {
    data(){
        return {
            data1:"我是匿名插槽",
            data2:"我是具名插槽
 
"
        }
    }
}
</script>
 
<!--2. 在使用插槽元件：-->
<template>
  <div >
    <TestSlot>
      <template v-slot:default='ctx1'>{{ctx1.data1}}</template>
      <template v-slot:main='ctx2'>{{ctx2.data2}}</template>
　　　　或者這樣寫

    </TestSlot>
  </div>
</template>
 
<script>
import TestSlot from "@/components/test-slot.vue"
export default {
  components:{
    TestSlot
  }
}
</script>

來源:https://blog.csdn.net/qq_42231156/article/details/107053267