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>
相关推荐
青皮桔几秒前
CSS实现百分比水柱图
前端·css
影子信息6 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月7 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201811 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿12 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
小莫分享1 小时前
github 镜像节点
java
链上Sniper1 小时前
智能合约状态快照技术:实现 EVM 状态的快速同步与回滚
java·大数据·linux·运维·web3·区块链·智能合约
孤水寒月1 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu1 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统