不具名插槽

子组件：

<template>
  <div>
    
    <slot>slot>
    <h3>这里是不具名插槽组件h3>
  div>
template>
 
<script>
export default {
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {}
}
script>
<style lang="scss" scoped>style>

在父组件中使用：

<template>
  <div id="inforCategory-warp">
    
    <lxsolt>不具名插槽lxsolt>
    
  div>
template>
 
<script>
import lxsolt from './lx'
export default {
  name: 'inforCategory',
  components: {
    lxsolt,
  },
  data(){
    return{}
  }
}
script>
<style lang="scss" scoped>
#inforCategory-warp {
}
style>

作用域插槽：
slot-scope使用(slot-scope绑定的是子组件的数据)：

在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。

在组件使用时，通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。

通过scope.xxx就可以使用绑定数据了
 

具名插槽以及作用域插槽

子组件：

父组件：

v-slot以及作用域插槽

子组件：

父组件：

文章来源：

https://www.cnblogs.com/zwd666/p/13444462.html

Vue中slot与slot-scope的理解及使用：https://blog.csdn.net/fang562878311/article/details/100579007?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control

vue插槽slot的理解与使用：https://www.cnblogs.com/songForU/p/10641751.html