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>

原文地址：https://blog.csdn.net/Wx001214/article/details/143763568

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！