Vue3 项目中父页面表格点击按钮更新子页面数据 - 解决数据不更新问题

要解决这个问题，你可以使用watch来监视父组件传递给子组件的数据变化，并在数据发生变化时更新子组件的展示。\n\n在子组件中，你可以使用watch来监视父组件传递的数据变化，然后更新子组件内部的展示数据。例如：\n\nvue\n<template>\n <div>\n <div>{{ data }}</div>\n </div>\n</template>\n\n<script>\nexport default {\n props: {\n value: {\n type: Object,\n required: true\n }\n },\n data() {\n return {\n data: null\n }\n },\n watch: {\n value: {\n immediate: true,\n handler(newVal) {\n this.data = newVal;\n }\n }\n }\n}\n</script>\n\n\n在父组件中，你可以通过给子组件的value属性传递一个唯一的key来强制更新子组件。例如：\n\nvue\n<template>\n <div>\n <table>\n <tr>\n <td>\n <button @click="getData(1)">获取数据1</button>\n </td>\n </tr>\n <tr>\n <td>\n <button @click="getData(2)">获取数据2</button>\n </td>\n </tr>\n </table>\n <child-component :value="childData" :key="childDataKey" />\n </div>\n</template>\n\n<script>\nimport ChildComponent from './ChildComponent.vue';\n\nexport default {\n components: {\n ChildComponent\n },\n data() {\n return {\n childData: null,\n childDataKey: 0\n }\n },\n methods: {\n getData(id) {\n // 模拟异步获取数据\n setTimeout(() => {\n const newData = { id: id, name: `数据${id}` };\n this.childData = newData;\n this.childDataKey++; // 强制更新子组件\n }, 1000);\n }\n }\n}\n</script>\n\n\n在父组件中，通过给子组件传递一个唯一的key来强制更新子组件，这样子组件就会重新渲染，并展示新的数据。