问答

vue2 父级render导致子级不正确的render

作者:admin 2021-04-22 我要评论

需求是将父级接收到的插槽重命名后,再传递给子级 比如子级有一个extra插槽,父级就把自己的childExtra插槽传递给子级(为什么父级插槽要命名为childExtra?因为...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

需求是将父级接收到的插槽重命名后,再传递给子级

比如子级有一个extra插槽,父级就把自己的childExtra插槽传递给子级(为什么父级插槽要命名为childExtra?因为可能存在子级不同但子级需要的插槽的名称相同的情况)

但是现在发现,只要父级发生render,那么子级必然render(实际上不需要render)

如何解决?

应用场景:我现在已经有了ChildA、ChildB两个子组件(代码不能改),这俩都接收一个extra插槽,然后我想用Parent组件去包住这两个子组件:

<template>
  <div>
    <child-a/>
    <child-b/>
  </div>
</template>

并且把Parent接收到的extraA插槽传递给ChildA、把extraB插槽传递给ChildB

重现地址

重现步骤:打开console,点击按钮,控制台打印:

'parent render'
'child render'

期望中的控制台打印:

'parent render'
###

// Any static slot children from the parent may have changed during parent's
// update. Dynamic scoped slots may also have changed. In such cases, a forced
// update is necessary to ensure correctness.

以上注释来自Vue源码
image

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue2 父级render导致子级不正确的rende

    vue2 父级render导致子级不正确的rende

  • uniapp 点击地图的标记点怎么拿到它的

    uniapp 点击地图的标记点怎么拿到它的

  • koa sequelize 怎么获取某个表的所有字

    koa sequelize 怎么获取某个表的所有字

  • 求助Webpack打包成功,页面报错

    求助Webpack打包成功,页面报错

腾讯云代理商
海外云服务器