定义slotCompoent.vue 组件

<template><slot></slot><slot name='slot1'></slot><slot name="slot2" msg="hello"></slot>
</template>

使用组件：

 <slotComponent><p>默认的</p><template #slot1><p>具名插槽</p></template><template #slot2="{ msg }">{{ msg }}</template></slotComponent>import slotComponent from './slotComponent.vue'

我们可以将上面的使用插槽的看做成一个对象，属性对应着三个函数,其中函数的返回值就是代码写的标签生成的虚拟节点

// 伪代码{
fucntion default (){}
fucntion slot1(){}
fucntion slot2({msg }){}}

// 然后在定义插槽组件时相当于是在调用函数，函数的返回值就是对应的虚拟节点，最后渲染在页面上。
说明如下：

 	<slot></slot> // 相当于调用default函数，返回p元素<slot name='slot1'></slot> // 调用slot1函数，返回p元素<slot name="slot2" msg="hello"></slot> // 调用slot2函数，并传递了参数msg。

我们也可以验证一下使用插槽时传递的值是不是函数。

方式如下：
定义一个js文件：

//ComTwo.js

import { createElementVNode } from 'vue'
export default  {setup(props, { slots }){console.log('slots.defaults',slots); // 看一下打印的值return()=>{return createElementVNode('div',null,[]); // 创建一个虚拟节点}}
}

// 使用组件

 <ComTwo><p>默认的</p><template #slot1><p>具名插槽</p></template><template #slot2="{ msg }">{{ msg }}</template></ComTwo>import ComTwo from './ComTwo.js'

我们发现ComTwo中打印的值如下：

我们发现传递的就是一个对象，展开三个属性，每个属性名对应插槽的名字，属性值是函数。返回值是对应的节点。