山东爱易网站建设工作室,网站佣金怎么做分录,呼伦贝尔北京网站建设,网络软文营销案例3篇安装和使用
见官方文档#xff1a;https://github.com/Akryum/vue-virtual-scroller/tree/master/packages/vue-virtual-scroller
如何获取子组件的实例 背景 本来正常情况下#xff0c;要获取v-for渲染的子组件的实例#xff0c;通过ref绑定即可获取到数组#xff0c;并…安装和使用
见官方文档https://github.com/Akryum/vue-virtual-scroller/tree/master/packages/vue-virtual-scroller
如何获取子组件的实例 背景 本来正常情况下要获取v-for渲染的子组件的实例通过ref绑定即可获取到数组并通过index即可定位到vue实例 templateRecycleScrollerclassscroller:itemslist:item-size32key-fieldidv-slot{ item }Info refinfo{{ item.name }}/Info/RecycleScroller
/template但是由于这里使用的是虚拟列表info.value打印出来的结果只是渲染出来的第一个实例 解决方案 发现通过为每一个组件绑定不同的ref通过这多个ref能够获取到每一个实例比如info0.value、info1.value 那么就只需要根据list动态的创建多个ref优化方案多个ref放到数组中通过index访问 RecycleScrollerclassscrollerrefscroller:itemsarr:item-size145:buffer400key-fielditemCodev-slot{ item, index }
OutInfo:refoutInfoRefs[index]/
/RecycleScroller//子组件的实例这里通过数组来进行存储每一个实例存储一个
const outInfoRefs: any [];
arr.value.forEach(item outInfoRefs.push(ref()));这样打印出来的outInfoRefs将会是多个ref实例 注意这里打印出来的并没有所有的只有视口上展示出来的加上不可见的预加载的几个 比如是这样的[null, null, null, ref(), ref(), ref(), ref(), null, null, null]
如何保存不在视口区域内的子组件的状态 背景 如果你在子组件的onMounted中输出日志的话会发现只有一开始加载的几个元素会输出后面为了提高效率只是重复渲染这已经加载的几个元素而已 那么问题来了实际上不同的子组件里面的状态是不一样的传递进去的props是会获取到的但是自己维护的是不变的 比如每个子组件有一个input你在第一个输入了一个hello假定你重复渲染的子组件是5个那么在第6个子组件渲染的时候你会惊奇的发现他已经变成了hello这显然不是我们需要的结果 解决方案 前面说过props是会正常获取到的那么通过watch到props的变化比如传递一个index 然后在这个watch中根据需要去初始化组件状态那么就可以实现 watch(() props.index,(newVal) {// 由于使用的是虚拟滚动每个子元素是复用的css样式会保留通过监听index的变化来达到重新渲染每个子元素的效果if (props.focusIndex newVal) {// 如果当前子元素是选中的那么需要进行一些操作} else {// 如果当前子元素不是选中的那么需要进行另一些操作doBlur(1);delColor();editIsDisabled();}}
);另一个问题赋初值保存变化值 假定第一个元素的input已经赋值了hello如果通过上面的代码的话那么第6个已经正常置空了 但是回去到第1个时候会发现也被置空了但是并不能通过props获取到刚才的改变因为没有保存 因为子元素无法保存但是对应的数据是可以保存的比如添加一个属性tempValue在change的时候通过props进行改变然后在watch的时候赋值上去这样是可行的
相关文章：
