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>
相关推荐
RainbowSea1 小时前
12. LangChain4j + 向量数据库操作详细说明
java·langchain·ai编程
RainbowSea2 小时前
11. LangChain4j + Tools(Function Calling)的使用详细说明
java·langchain·ai编程
excel2 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel3 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼5 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping5 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
考虑考虑5 小时前
Jpa使用union all
java·spring boot·后端
石金龙6 小时前
[译] Composition in CSS
前端·css
用户3721574261356 小时前
Java 实现 Excel 与 TXT 文本高效互转
java
白水清风6 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化