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

[1010011010]

子组件的模板是这样子：

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

结果：

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

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

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

期望结果：

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

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

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

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

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

[1010011010]

父组件用 props 传递数据到子组件，子组件用 事件 传递数据到父组件
https://cn.vuejs.org/v2/guide/components-props.html#单向数据流

子组件值每秒更新一次，潜意识总觉得这不是事件，陷入了误区。。。