[Vue] 如何在子组件的插槽里使用子组件的值？

子组件的模板是这样子：

<template>
    <div>
        <slot>
            {{value()}}
        </slot>
    </div>
</template>

结果：

<div>
    （子组件值）
</div>

想要给子组件值套一层容器，应该怎么做呢？

<component>
    <span>
        {{component_value()}}
    </span>
</component>

期望结果：

<div>
    <span>
        （子组件值）
    </span>
</div>

尝试过引用子组件但是行不通：访问子组件实例或子元素

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。

这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

这只能传入模板做模板替换了吗