V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
1010011010
V2EX  ›  问与答

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

  •  
  •   1010011010 · 2020-02-23 15:18:11 +08:00 · 1007 次点击
    这是一个创建于 647 天前的主题,其中的信息可能已经有所发展或是发生改变。

    子组件的模板是这样子:

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

    结果:

    <div>
        (子组件值)
    </div>
    

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

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

    期望结果:

    <div>
        <span>
            (子组件值)
        </span>
    </div>
    

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

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

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

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

    1 条回复    2020-02-24 09:37:17 +08:00
    1010011010
        1
    1010011010   2020-02-24 09:37:17 +08:00
    父组件用 props 传递数据到子组件,子组件用 事件 传递数据到父组件
    https://cn.vuejs.org/v2/guide/components-props.html#单向数据流

    子组件值每秒更新一次,潜意识总觉得这不是事件,陷入了误区。。。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1342 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 18:15 · PVG 02:15 · LAX 10:15 · JFK 13:15
    ♥ Do have faith in what you're doing.