vue3项目中父页面表格点击第一行按钮获取数据然后把数据传到子页面然后通过v-model展示在页面然后点击第二行的按钮的时候重新获取数据把数据传到子页面显示的时候还是显示的第一次展示的数据这个怎么解决
要解决这个问题,你可以使用watch来监视父组件传递给子组件的数据变化,并在数据发生变化时更新子组件的展示。
在子组件中,你可以使用watch来监视父组件传递的数据变化,然后更新子组件内部的展示数据。例如:
<template>
<div>
<div>{{ data }}</div>
</div>
</template>
<script>
export default {
props: {
value: {
type: Object,
required: true
}
},
data() {
return {
data: null
}
},
watch: {
value: {
immediate: true,
handler(newVal) {
this.data = newVal;
}
}
}
}
</script>
在父组件中,你可以通过给子组件的value属性传递一个唯一的key来强制更新子组件。例如:
<template>
<div>
<table>
<tr>
<td>
<button @click="getData(1)">获取数据1</button>
</td>
</tr>
<tr>
<td>
<button @click="getData(2)">获取数据2</button>
</td>
</tr>
</table>
<child-component :value="childData" :key="childDataKey" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
childData: null,
childDataKey: 0
}
},
methods: {
getData(id) {
// 模拟异步获取数据
setTimeout(() => {
const newData = { id: id, name: `数据${id}` };
this.childData = newData;
this.childDataKey++; // 强制更新子组件
}, 1000);
}
}
}
</script>
在父组件中,通过给子组件传递一个唯一的key来强制更新子组件,这样子组件就会重新渲染,并展示新的数据
原文地址: https://www.cveoy.top/t/topic/ipli 著作权归作者所有。请勿转载和采集!