vue3 slot 插槽

作用：用于组件之中，用于父组件在调用子组件分发在子组件中插入的内容，可以是字符串、HTML模板甚至是组件

规则：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的
在子组件的编写方式如下

<slot></slot>

v-slot 缩写 #

具名插槽：
就想我们坐火车拿着车票对号入座一样，在子组件中首先给slot的一个名字，就像提前给火车上的作为编好号，父组件在进行内容分发时，把内容对号入座就行

<slot name="1"></slot>
<slot name="2"></slot>
<slot name="3"></slot>
<slot></slot>

父组件在的内容在对号入座时

<template v-slot:1></template>
<template v-slot:2></template>
<template v-slot:3></template>
<template v-slot:default></template>

如果是多个插槽，默认是default的也得写上

动态插槽

<template v-slot:[变量名]></template>

使用插槽如何在父组件中获取并使用子组件中的数据，就是我们常说的作用域插槽

父组件
<template>
  <Child>
      <template v-slot:slot1="slotScope">
          <div style="color:red">slot1子组件数据：：：：{{slotScope.item}}</div>
      </template>
      <div>==================================</div>
       <template v-slot:slot2="{item}">
          <div style="color:green">slot2子组件数据：：：：{{item}}</div>
      </template>
  </Child>
</template>
<script>
import Child from "./child.vue";
export default {
  components: {
    Child,
  },
  setup() {},
};
</script>

子组件
<template>
    <div v-for="item in 10" :key="item">
        <slot name="slot1" :item="item"></slot>
        
        <slot name="slot2" :item="item+1"></slot>
    </div>
</template>
<script>
export default {
    setup() {
        
    },
}
</script>

效果图

总结：
子组件把需要给父组件的数据，以属性绑定的形式绑定的slot标签上，在父组件中就可以使用v-slot=“slotScoped”来接收

也可以使用对象的解构赋值来去需要的一些字段，可以是代码美观一点

仅记录平常学习