uniapp的B页面返回到A页面，A页面刷新引入组件的内容

原创

已于 2023-01-02 22:00:20 修改 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #css3 #vue.js

于 2021-02-19 12:20:39 首次发布

在uniapp开发中遇到一个问题，当从B页面返回A页面时，A页面内的组件数据未能自动刷新。为解决这个问题，可以在A页面的onShow生命周期中调用子组件的刷新方法。在A页面的模板中引用子组件并获取其引用，在onShow后使用$nextTick确保DOM更新后，调用子组件的overloadData方法来刷新数据。虽然这样能解决问题，但可能会导致初次进入A页面时数据请求被触发两次，需要注意优化请求逻辑。

在这里插入图片描述

uniapp的B页面返回到A页面，A页面刷新引入组件的内容

- 前言
- 解决
- 缺点

前言

最近做项目有这么一个需求。从A页面路由到B页面添加数据，添加成功就返回A页面，发现A页面引入的组件没刷新数据。

解决

A页面源码
A页面主要是在onShow生命周期中调用子组件方法，从而达到刷新数据的效果。

<template>
	<view class="main">
		<store ref="store"></store>
	</view>
</template>

<script>
	import store from '../../components/store.vue'

	export default {
   
   
		data(