欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > 用h()给渲染的组件传递参数

用h()给渲染的组件传递参数

2024/10/25 1:21:36 来源:https://blog.csdn.net/m0_62742402/article/details/139656093  浏览:    关键词:用h()给渲染的组件传递参数

项目的一个下载悬浮提示框是使用antv的notification组件结合自定义的进度条实现的。

效果:

由于进度条需要完整显示,所以取消了组件自带的自动关闭效果。

查看官方文档,可以通过notification.close(key)来关闭提示框窗口。其中key是notification的唯一值。

我们需要实现的效果是,下载完毕后延迟3s后关闭提示框(即进度条达到100之后)

项目中进度条的实现是通过Vue3的 h()函数将进度条组件Downloading和自定义进度条函数process渲染在notification中的。

而我们只能在Downloading组件中去监听进度条的进度,而关闭提示框又需要调用notification.close(key),所以我采取的方案是,渲染进度条时,将当前提示框的key传递给Downloading组件,当Downloading组件监听到进度为100时,调用notification.close(key)。

但一开始,将传参的名字设置为key传递给Downloading组件,我发现子组件无法正确接收到key的值。查询vue3的h()文档后我发现是因为在 Vue 3 中,使用 h 函数传递属性时,由于key 是一个保留属性,不会作为普通的 prop 传递给组件。要解决这个问题,可以使用其他名称来传递 key,例如 notificationKey。

所以我将传递的参数名改成了notificationKey即可实现。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com