问题描述:
背景: 在父组件中调用一个公共组件,通过props将方法函数传递给子组件完成初始请求,在app端进行操作之后,监听app的jssdk,再次进行数据请求并重新渲染视图
遇到的问题: 请求数据的方法,以及父组件中需要渲染的部分,通过props传递给子组件,子组件获取数据后,将获取的数据渲染到父组件传递过来的DOM中,在父组件中监听jssdk,进行下一次请求,公共组件不能出发视图的更新
代码如下:
父组件中需要通过公共组件渲染的部分:
调用公共组件的部分:
子组件调用父组件请求数据方法:
公共组件渲染部分:
监听jssdk:
这样处理,虽然调用了方法,但实际上只是在父组件中调用了,这操作是无效的
解决思路:
让公共组件去再次调用方法,进行页面的重新渲染
那么要怎么做才能让公共组件再次调用方法呢?
首先,在公共组件中定义重新调用请求数据的方法:
然后使用了useImperativeHandle,将这个方法对外暴露,并且将父组件传递的ref也同时再暴露出去
在父组件中,初始化定义ref,并将ref传递给公共组件
在父组件中,监听到jssdk后,通过ref调用公共组件中定义的方法
先判断是否公共组件是否接收到了父组件中定义的ref,并且暴露出来,成功之后,通过ref调用公共组件中定义的reload方法重新请求数据完成再次渲染达到更新视图的操作