vue中父子组件通过props传递数据,页面加载完毕,父组件数据更新,子组件不动态更新的解决方案

时间:2024-03-22 18:48:55

近期在开发中遇到一个问题,把项目中评分星星剥离出来抽象为一个子组件,页面中也用后发现:如果是通过v-for渲染的列表,数据可以正常通过props传递到子组件并渲染加载,但是如果是异步加载获取到的数据能正常传到子组件中,但是不会重新渲染加载。

vue中父子组件通过props传递数据,页面加载完毕,父组件数据更新,子组件不动态更新的解决方案
异步加载获得的数据传递给子组件
vue中父子组件通过props传递数据,页面加载完毕,父组件数据更新,子组件不动态更新的解决方案
通过v-for渲染的数据传递给子组件

查了一些网友的帖子后发现,只要在子组件中加侦听器watch监听props中值的变化,并在值变化时做出响应的更新即可。

 vue中父子组件通过props传递数据,页面加载完毕,父组件数据更新,子组件不动态更新的解决方案

注意:这里的score就是props中的数据,{}中要加this. ,我这里要做判断,所以重新执行了一边判断。