Vue之作用域插槽

今天在查缺补漏的过程中，发现了我之前没有使用和具体了解的作用域插槽，那么作用域插槽究竟是做什么的呢？
官网讲解

实例

在父组件中，有一个子组件，我们在渲染子组件的时候想要控制子组件内部的变量可以动态的展示。

eg:父组件 slotFather.vue中
<template>
  <div class="parentSlot">
    <SlotSon1>
      <template v-slot:scopename="slotProps">
        {{slotProps}}
      </template>
    </SlotSon1>
  </div>
</template>
<script>
  import SlotSon1 from "../components/SlotSon1";

  export default {
    components:{
      SlotSon1
    },
    data(){
      return {

      }
    }
  }
</script>

eg:子组件中 slotSon.vue中
<template>
  <div class="son1Slot">
      我是子元素
    <slot name="scopename" :user="user"/>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        user:{
          name:'子',
          age:'20',
          hobby:'footerball'
        }
      }
    }

  }
</script>

讲解：如果想在父组件中使用子组件的变量，我们可以在子组件插槽位置将子组件中的变量绑定一下，在父组件中用v-slot接收一下，就可以在父组件中动态控制子组件显示的内容。

使用场景

当我们在父组件中，如果想控制不同的位置展示不同的子组件内容，子组件中本身会拥有很多不同的内容，我们就可以在父组件中根据不同的条件来控制子组件的展示/数据。

如果了解或者表达有不合适的地方，请大家指出~