uniapp 子组件 mounted 刷新

本文介绍了两种在Vue中实现页面刷新和组件管理的方法。第一种是在父组件的onShow事件中调用子组件的方法来刷新数据,通过控制子组件的数据请求实现页面更新。第二种方法是利用v-if在onShow时创建组件,在onHide时销毁,达到刷新效果。同时详细展示了子组件中数据初始化和请求处理的实现细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

方法一:通过在父组件的onShow调用子组件的方法(请求) 实现页面的刷新

父组件 html

	<stock :obj="obj"  ref="stock" />

js

	onShow() {
		console.log('我是onshow')
		this.$refs.stock.getData()
	},

子组件

js 请求的参数必须在data中初始化

data() {
	return {
		tableData:{},
		info:{
			directorEnabled: JSON.parse(uni.getStorageSync('userInfo')).directorEnabled,
			managerId:JSON.parse(uni.getStorageSync('userInfo')).branch.managerId,
			token: uni.getStorageSync('token'),
			beginTime: 1600854391,
			endTime:1700854463,
			displayEnable: false,
			businesserId:JSON.parse(uni.getStorageSync('userInfo')).directorEnabled?JSON.parse(uni.getStorageSync('userInfo')).id:''
		},

	};
},

方法:

async getData(type){
	let json = await api.tarvelIndex(this.info)

	console.log(json,'我是json')
	if(json.status === 200){
		json.data.map(item=>{
			if(item.id = this.obj.id){
				this.tableData = item
			}
		})
	}
},

方法二:v通过-if 在父组件中的onShow 创建和 onHide销毁组件

父组件 html

  <stock :obj="obj"  v-if="flag" />

js

onShow() {
	this.flag = true
},
onHide() {
	this.flag = false
},

子组件正常使用

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值