使用vue3-scroll-seamless滚动组件调用内部reset方法更新数据时报错

如下图报错

目的:数据需要动态更新,组件文档说调用内部reset方法即可
在这插入图片描述按照文档操作,报如下错误,打印seamlessScroll.value.reset也是undefind
在这里插入图片描述
分析原因:代码使用了setup语法糖,导致子组件方法和变量是私有的,无法直接调用。解决方法如下
方法一:
看源码,打开node_modules/vue3-scroll-seamless/dist/vue3-scroll-seamless.mjs。找到如下图位置
在这里插入图片描述
源码这里监听了dataList的变化,并自行调用reset方法,但是查看arrayEqual方法只对比了长度,这里自行改造一下该方法即可
在这里插入图片描述
自行改造,发现并没有效果(加了console,发现并没有生效,考虑重启和清除缓存发现都没有效果)
最后修改了vite.config.js文件(没改东西,随便注释再还原,主要是触发一下重新编译),就有效果了。
在这里插入图片描述
生效后就可以正常动态更新数据了,也不需要手动调用reset方法。

方法二
由于源码reset方法是写在setup函数里的,不可以直接使用defineExpose(只能用于setup修饰的script标签里),受启发链接
https://cloud.tencent.com/developer/article/2422542,重点如下图
在这里插入图片描述
尝试修改源码setup函数如下
在这里插入图片描述
在这里插入图片描述
修改之后,效果相当于使用了defineExpose方法,将子组件reset方法暴露出去,在父组件中打印是有效果的,可以直接调用了。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值