深入理解Vue插槽

子组件ChildComp.vue

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

父组件App.vue

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp>
    <p>defalut solt</p>
    <template #slot1>
      <p>solt1</p>
    </template>
    <template #slot2="{msg}">
      <p>solt2: {{msg}}</p>
    </template>
  </ChildComp>
</template>

ChildComp包含的代码片段可以理解为是一个对象如下：
{
default: function(){} // (这个函数的返回结果是

defalut solt

),
slot1:function(){} // (这个函数的返回结果是

solt1

),
slot2: function(msg){} // (这个函数的返回结果是

solt2: {{msg}}

),
}