关于解决下拉文字跳动方法的疑惑

关于解决下拉文字跳动方法的疑惑

老师您好,我想知道直接在父组件中修改下拉文字就会产生跳变问题的原因。而为什么通过在子组件中定义了方法再在父组件中调用修改下拉问题的方法就解决的这个问题。这其中的原理是什么?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2019-05-12 16:15:07

同学你好, 直接在父组件中修改下拉文字, 相当于直接修改父组件data中的值, 因为改变组件data中的数据会重新渲染页面, 所以会出现跳变的现象。

在父组件(Scroll)的data上的数据,子组件(loading)会重新调用(相当于重新获取),在子组件中修改下拉的文字, 然后在父组件通过ref获取的子组件就是在渲染之后改变的这个数据,不会再进行重新渲染,所以可以解决这个问题。

如果帮助到了你 ,欢迎采纳!

祝学习愉快~~~

  • 提问者 qq_那些荒废流年 #1
    老师,应该是父组件先通过ref获取子组件,再通过子组件的setText方法来修改下拉文字的内容吧? 对于 在父组件(Scroll)的data上的数据,子组件(loading)会重新调用(相当于重新获取) 这句话我不是很理解,您能再讲讲么?
    2019-05-12 16:24:03
  • 同学你好, 抱歉老师这里可能描述的不够严谨, 父组件先通过ref获取子组件,然后调用子组件的setText方法修改下拉文字的内容。 对于在父组件(Scroll)的data上的数据,子组件(loading)会重新调用(相当于重新获取) 这句话可以理解为是因为在子组件内声明一个变量loadingText保存父组件父组件传递过来的数据,修改父组件上的data数据, 子组件中修改的是loadingText值, 重新渲染一次。所以父组件通过ref获取子组件的setText方法获取到的是已经渲染好的子组件, 所以不会出现跳动的问题。
    2019-05-12 16:43:13
  • 老师我还是有点绕,那通过setText方法设置下拉文字的时候,它也是直接修改了子组件data中的数据呀,这就不会产生跳变了吗?为什么
    2019-05-12 16:59:52
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
热门框架Vue开发WebApp 18版
  • 参与学习           人
  • 提交作业       209    份
  • 解答问题       3299    个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师