vue插槽slot的详细用法，包括各种传值情况
学过去很久的vue，突然想到slot这个有趣的东西，所以写一篇用法文章来回顾一下，虽然个人感觉做项目的时候好像很少用到插槽，但是这个东西的功能确实是很强大的
1、插槽slot的基本使用：
所谓插槽，就是vue中父组件在调用子组件的时候，需要在子组件的某个特定位置使用一些模板代码，主要是html，也就是在子组件的固有模板中插入一些可变化的前端部分，所以，需要在子组件的某个位置放置一个slot插槽，可以理解为一个存放父组件传递过来的代码模板的容器，之后，只需要在父组件中写入模板接口，示例代码如下：
子组件：
<template>
<div>
<slot></slot> //这个位置就是存放模板的容器
<div>我是子组件</div>
</div>
</template>
<script>
父组件：
<script setup>
// import HelloWorld from './components/HelloWorld.vue'
import mycom from './components/mycompo.vue'
import myslot from './components/slotone.vue'
</script>
<myslot>
<h1>我是父组件</h1> //这段代码将会插入到子组件中slot的位置
</myslot>
2、具名插槽
什么是具名插槽呢？顾名思义，就是有名字的插槽，因为在一个子组件中，通常需要父组件传递不同的模板，也就是说这些模板需要插入到子组件的不同位置，所以为了区分这些不同的模板及其插入的位置，我们就需要使用具名插槽。
如何使用具名插槽，需要在子组件的slot标签里面使用name属性指定该slot名字，在父组件中使用v:slot或者简写属性#来指出该模板对应的子组件的那个name值，然后进行插入，上代码理解一下：
子组件：
<template>
<div>
我的组件
<div>{
{
kk}}</div>
<ul>
<li v-for="(item,index) in myarray" :key="index">{
{
item}}</li>
</ul>
<div>{
{
myfun(kk)}}</div>
<slot name="A" msg="A的数据"></slot> //这个是一个name为A的插槽
<slot name="B" msg="B的数据"></slot> //这个是一个name为B的插槽
</div>
</template>
父组件：
<script setup>
// import HelloWorld from './components/HelloWorld.vue'
import mycom from './components/mycompo.vue'
</script>
<mycom kk="xjd love zsy" :myarray="mylist" :myfun="myfun" class="ziclass">
<template #A>
/**注意，使用具名插槽时，插入的代码必须使用template包裹，
并且在其中指出要插入的slot对应的名字，比如这个模板就是要插入
子组件中名字为A的slot中**/
<h1>插槽A</h1>
</template>
<template #B> //这个模板是要插入子组件中名字为B的slot中
<h1>插槽B</h1>
</template>
</mycom>
3、父组件的模板需要使用子组件的数据的情况
这种情况就涉及到数据的传输问题，总结一下来说，就是需要子组件的数据先传递到父组件，然后父组件在使用数据进行渲染，对于普通的slot来说，就是在子组件中使用名字=“值” 的形式来传送数据，注意如果使用到的值是data里面的，则需要在名字前面加：，也就是 ：名字=“data里面的数据” ，而父组件中使用 v-slot=“对象名字” 的方式来获取子组件返回的数据大对象， 示例如下：
子组件：
<template>
<div>
<slot :msg="msg"></slot>
</div>
</template>
<script>
export default {
data() {
return {
msg:"子组件的数据"
}
},
}
</script>
父组件：
<myslot v-slot="fuprops"> //fuprops是一个包含所有传递过来的键值对的大对象
<h1>传递过来的是{
{
fuprops.msg}}</h1> //使用到fuprops中的msg这个键的值
</myslot>
效果如下：
对于具名插槽的数据传输，只是在父组件的代码上有区别，不使用v-slot进行绑定，而是直接绑定到名字上即可：
父组件：
<mycom kk="xjd love zsy" :myarray="mylist" :myfun="myfun" class="ziclass">
<template #A="Ashuju"> //将数据大对象绑定在这里
<h1>插槽A+{
{
Ashuju.msg}}</h1> //使用到slot名字为A的msg数据
</template>
<template #B="Bshuju"> //同理
<h1>插槽B+{
{
Bshuju.msg}}</h1>
</template>
</mycom>
子组件：
<slot name="A" msg="A的数据"></slot>
<slot name="B" msg="B的数据"></slot>
效果如下：
好，今天的slot知识就写这些，后续还有比较有意思的内容还会更新，大家也可以上vue的官网查看更加详细的slot知识，但是我相信上述所讲到的应该是够用了！