Astro页面能否获取Vue组件作用域插槽的数据？

Vue与Astro的作用域插槽基础示例 #

Vue的作用域插槽实现 #

Vue中子组件可通过作用域插槽向父组件传递数据，示例如下：

// child.vue
<template>
  <slot :msg="'pass me up!'">default message</slot>
</template>

// parent.vue
<template>
  <Child v-slot="{ msg }">{{ msg }}</Child>
</template>

Astro的作用域插槽实现 #

Astro也有对应的作用域插槽实现方式：

---
// Child.astro
const html = await Astro.slots.render('default', [Astro.props.msg.toUpperCase()]);
---
<Fragment set:html={html} />

---
// Parent.astro
---
<Child>{ msg => <span>{msg}</span> }</Child>

核心问题 #

现在需要实现Astro页面获取Vue组件的作用域插槽数据，但以下写法无法生效：

// child.vue
<template>
  <slot :msg="'message from vue!'"></slot>
</template>

---
// Parent.astro
---
<Child>
  { t => <span>{t}</span> }
</Child>

注：示例忽略了导入等样板代码

临时解决方案（非最优） #

目前找到一个临时方案，但并不理想：

// child.vue
<template>
  <template v-if="renderer">
    <span v-html="renderer('message from vue!')"></span>
  </template>
  <template v-else>
    <slot :msg="'message from vue!'"></slot>
  </template>
</template>

---
// Parent.astro
---
<Child renderer={ (t : string) => `<span>${t}</span>` }></Child>

此方案仅作临时替代，并非官方推荐的正式最优解

内容的提问来源于stack exchange，提问作者Sebas R.