关于滚动条更新的2种方法，为什么不直接调用updateScroll方法，而要在组件间传参这么麻烦呢？
来源：4-4 更新滚动条和图片的懒加载
Raznov
2020-03-12 15:51:54
在视频中，老师说更新滚动条有2种方法，但是他选择的是通过在home组件中接收recommend数据的变化，然后home组件把变化的值给scroll组件，scroll组件内部通过监听变化来更新滚动条，这个过程是不是有点复杂了？
老师在视频中预留了空的updateScroll 方法，我自己试着做了下，感觉清晰了很多。
为什么不选择使用这一种更简单的方法呢？
<!-- Home组件里：recommend组件加载到数据后,触发更新滚动条事件 --> <home-recommend @loaded="updateScroll" ref="recommend" />
methods: {
// 然后Home组件调用Scroll组件里的更新滚动条函数
updateScroll () {
this.$refs.scroll.update()
},//Scroll组件里：执行滚动条更新
update () {
setTimeout(() => {
this.$refs.swiper && this.$refs.swiper.swiper.update()
}, 0)
}写回答
3回答
-
同学你好，课程中想的是更新的操作都在scroll组件中完成，所以复杂了一些，将recommend组件中数据更新的消息传递给了父组件，然后再传入scroll组件中。
同学能够自己简化是很棒哦！能够实现效果就可以。
祝学习愉快！
0 -
好帮手慕星星
2020-03-13
同学你好，loaded事件是在recommend子组件中触发的，那么这个事件只能绑定在父组件上
不能绑定在其他组件上，也触发不了，所以没有效果。
自己再测试理解下，祝学习愉快！
0 -
Raznov
提问者
2020-03-12
老师，那可不可以不经过Home组件，scroll组件的滚动条就能随着recommend的更新而更新呢？
在recommend组件的数据更新后，它emmit了loaded事件，由scroll组件上设置的事件监听器@loaded="update"接收。但是我试了下，完全没反应，scroll组件内部没法监听到recommend组件触发的事件，这是为什么呢？
//scroll组件 <template> <!-- 滚动条容器 --> <swiper ref="swiper" :options="swiperOption" @loaded="update" > </template> <script> export default { methods: { update () { console.log('更新滚动条') this.$refs.swiper && this.$refs.swiper.swiper.update() } } } </script>0
相似问题