子组件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}}
),}