关于 watch

关于 watch

http://img1.sycdn.imooc.com//climg/5d5c14a200012dbd08020460.jpg

请问老师:

在watch 监听事件中,父组件 绑定的 dataSlider 传 值 进来的时候,为什么还要给  keyId 一个0~1的随机数?之前在  data( ) 默认不就已经return给了 keyId: Math.random()? 为什么父组件传值进来还要再给一次?

请老师解惑,谢谢您。


正在回答

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

2回答

你好同学,老师在源码中的base/slider/index.vue没有找到dataSlider,是你自己练习的时候起的名字吧?同学说的和源码中的如下是一样的,

http://img1.sycdn.imooc.com//climg/5d5d354a00010e3b07720203.jpg

即视频中设置的如下data是一样的。http://img1.sycdn.imooc.com//climg/5d5d34a90001759804860192.jpg

建议同学下载源码参考一下,这就是在silder/index.vue组件中更新的key值。

http://img1.sycdn.imooc.com//climg/5d5d365f000105d011220240.jpg

和同学说的是一样的,同学再重新理解一下哦。祝学习愉快,望采纳。

  • 慕小庄 提问者 #1
    谢谢老师!已经理解了!
    2019-08-21 22:34:18
好帮手慕夭夭 2019-08-21 14:18:00

你好同学,因为老师想要在更新的时候重新加载swiper组件,所以使用了更新key的方式来实现效果。(课程中老师有讲过,复习一下视频哦)

http://img1.sycdn.imooc.com//climg/5d5cdf940001238708220168.jpg

如下是给keyId初始化,这里同学需要注意:老师只是默认值也给了一个随机数。随机数生成什么,它的值就是什么。例如这里随机数生成的是5 ,那么它就是5 。http://img1.sycdn.imooc.com//climg/5d5cdfe9000197b106370190.jpg

而老师上面也说了,需要在数据改变的时候,更新key值,所以在监听的函数中,去修改keyId的值。这样当数据发生改变,就会触发监听中的函数,然后再随机给它赋值另一个随机数,让keyId的值改变,就会触发组件的更新了。

http://img1.sycdn.imooc.com//climg/5d5ce0d300015d7006970288.jpg

祝学习愉快,望采纳。

  • 提问者 慕小庄 #1
    老师您好: 我目前所理解的是每一次刷新,keyid 都会不一样,首先,还未刷新时,因为有data()中return的keyId 默认值,所以画面会出现效果,当页面刷时,slider组件会先判断dataSlider 是否有值,有值的话就讲乱数0~1随机赋给this.ketid一个值,此时,home/slider.vue 组件接收到 base/slider/index.vue 的更新,所以 home/slider.vue 组件一并更新。 请老师检查思路,如有不对的地方,再请老师纠出错误,谢谢您。
    2019-08-21 15:51:37
  • 提问者 慕小庄 #2
    base/slider/index.vue //监听数据 watch: { dataSlider(val) { //判断 传入的 值 是否 是空数组 if(val.length === 0) { return; } this.keyId = Math.random(); } },
    2019-08-21 15:54:36
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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