vue中插槽的本质

news2024/11/15 1:24:44

定义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'