uni-app使用watch监听数据,当数据变化时页面没有根据变化数据渲染解决方法

uni-app使用<Fudian :fenshuj="fenshuj"></Fudian>父传子数据时,子组件通过

import { ref, onMounted, watch, watchEffect, defineProps } from "vue";

const props = defineProps({

fenshuj: {

type: String,

required: true

}

});

接收数据,想要实现子组件根据父组件传过来的内容实时更新,可以使用watch监听数据的改变,但是会发现监听到数据发生改变了但是页面并没有根据新改变的内容做一个重新渲染,可以使用watchEffect来触发组件的重新渲染

示例:带分页的表格

复制代码
<template>
	<view>
		<th-table :column="column" :listData="data" :checkSort="checkSort" :st="st" :sr="sr" :tdClick="tdClick"
			height="0.5" :stripe="true" :border="true" :loading="false">
			<template v-slot:b="Props">
				<span style="color: red;">{{ Props.item.b }}</span>
			</template>
			<template v-slot:c="Props">
				<span style="color: green;" @click="log(Props.item)">{{ Props.item.c }}</span>
			</template>
			<template v-slot:a="Props">
				<div style="color: pink;">{{ Props.item.a }}</div>
				<div>{{ Props.item.e }}</div>
			</template>
		</th-table>
		<view class="pagination">
			<button @click="prevPage" :disabled="pageNo === 1">上一页</button>
			<view class="pagina_q">
				<view>
					页码 {{ pageNo }}/{{ totalPages }}
				</view>
			</view>
			<button @click="nextPage" :disabled="pageNo === totalPages">下一页</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, watch, watchEffect, defineProps } from "vue";
	const props = defineProps({
		fenshuj: {
			type: String,
			required: true
		}
	});

	const fenshuj = ref({});
	const nair = ref();

	// 表头配置参数
	const column = ref([
		{
			title: '时间',
			isSort: false,
			isFixed: false,
			key: 'dataTime'
		},
		{
			title: '电费',
			isSort: true,
			isFixed: false,
			key: 'powerPrice'
		}
	]);
	// 表身数据
	const data = ref([]);

	// 排序字段
	const st = ref('b');
	// 排序 1降序 -1升序
	const sr = ref(-1);

	// 切换排序事件
	const checkSort = (name : string, type : number) => {
		st.value = name;
		sr.value = type;
	};
	// 模拟请求数据
	setTimeout(() => {
		data.value = nair.value;
	}, 500);

	// 分页相关
	const pageNo = ref(1);

	// 计算总页数
	const totalPages = ref();
	// 分页操作
	const nextPage = () => {
		if (pageNo.value < totalPages.value) {
			pageNo.value += 1;
			uni.$emit('pageNoChange', pageNo.value);
		}
	};
	const prevPage = () => {
		if (pageNo.value > 1) {
			pageNo.value -= 1;
			uni.$emit('pageNoChange', pageNo.value);
		}
	};

	onMounted(() => {
		uni.$emit('pageNoChange', pageNo.value);
	});

	// 监听 props.fenshuj 的变化
	watch(() => props.fenshuj, (newVal) => {
		fenshuj.value = newVal;
		// 检查 newVal 是否为 undefined
		if (newVal) {
			totalPages.value = newVal.pageTotal;
			if (fenshuj.value && fenshuj.value.data && fenshuj.value.data.tableData) {
				nair.value = fenshuj.value.data.tableData;
				data.value = nair.value; // 手动更新 data.value
			}
		} else {
			console.warn("fenshuj 的值为 undefined");
		}
	}, { immediate: true });

	// 使用 watchEffect 确保数据更新后能够正确触发组件的重新渲染
	watchEffect(() => {
		if (fenshuj.value && fenshuj.value.data && fenshuj.value.data.tableData) {
			nair.value = fenshuj.value.data.tableData;
			data.value = nair.value; // 手动更新 data.value
		}
		if (fenshuj.value && fenshuj.value.pageTotal) {
			totalPages.value = fenshuj.value.pageTotal;
		}
	});
</script>
相关推荐
群联云防护小杜几秒前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
风象南9 分钟前
SpringBoot配置属性热更新的轻量级实现
java·spring boot·后端
洛阳泰山10 分钟前
Spring Boot 整合 Nacos 实战教程:服务注册发现与配置中心详解
java·spring boot·后端·nacos
Y40900110 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
YuTaoShao11 分钟前
【LeetCode 热题 100】994. 腐烂的橘子——BFS
java·linux·算法·leetcode·宽度优先
布朗克16812 分钟前
java常见的jvm内存分析工具
java·jvm·数据库
汉得数字平台18 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹25 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
都叫我大帅哥1 小时前
深入浅出 Resilience4j:Java 微服务的“免疫系统”实战指南
java·spring cloud
Cao_Shixin攻城狮3 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter