如下图报错
目的:数据需要动态更新,组件文档说调用内部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方法暴露出去,在父组件中打印是有效果的,可以直接调用了。