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>
相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
战族狼魂3 小时前
CSGO 皮肤交易平台后端 (Spring Boot) 代码结构与示例
java·spring boot·后端
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
xyliiiiiL4 小时前
ZGC初步了解
java·jvm·算法
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
hycccccch5 小时前
Canal+RabbitMQ实现MySQL数据增量同步
java·数据库·后端·rabbitmq