vue3.0 插槽，插槽的作用，匿名，具名，作用域

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签

简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”

话不多说，上代码：

每个都要建两个vue，记住写路由

匿名插槽：

<template>
  <div class="son">
    <h1>子组件匿名</h1>
  </div>
</template>


<script lang="ts">
export default ({
    name:"SlotComp",
    data(){ 
        return{

        }
    }
})
</script>

<template>
  <div class="father">
    <h1>父组件匿名</h1>
  </div>
</template>


<script lang="ts">
import SlotComp from "./z.vue";
export default {
  components: {
    SlotComp,
  },
};
</script>
 

具名插槽：

<template>
  <div class="father">
    <slot-comp>
      
      <template v-slot:default={user}> 
          {{user.name}}
       </template>

   </slot-comp>
  </div>
</template>

<script lang="ts">
import SlotComp from "./z.vue";
export default {
  components: {
    SlotComp,
  },
};
</script>
 

<template>
  <div class="son">
    <slot name="a">具名插槽</slot>
  </div>
</template>

<script lang="ts">
export default ({
    name:"SlotComp",
    data(){ 
        return{

        }
    }
})
</script>

 作用域插槽：

<template>
  <div class="father">
    <slot-comp>
      <h3>作用域插槽</h3>
   </slot-comp>
  </div>
</template>

<script lang="ts">
import SlotComp from "./z.vue";
export default {
  components: {
    SlotComp,
  },
};
</script>

<template>
  <div class="son">
    <slot :user="user">{{user.name}}</slot>
  </div>
</template>

<script lang="ts">
export default ({
    name:"SlotComp",
    data(){ 
        return{

        }
    }
})
</script>