Vue.js中父组件更新时如何同步更新子组件？

你的问题核心在于父组件的state没有被正确更新为响应式状态，同时setup函数的this指向错误，导致父组件的state根本没有实际变化，子组件自然拿不到更新后的值。具体问题点：

1. Vue3的setup函数中，this是undefined，你用普通函数作为setInterval的回调，this指向全局对象，根本无法修改组件的state。
2. 你混用了选项式API（data选项）和组合式API（setup），但没有正确在setup中处理响应式变量，导致state的变更无法触发组件更新。

下面提供两种修正方案，任选其一即可：

方案一：纯选项式API（适合熟悉Vue2写法的场景） #

修改App.vue，去掉setup，用mounted钩子启动定时器，确保this指向组件实例：

<template>
  <div id="app">
    <ChildComponent :state="state"/>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue'

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  data() {
    return {
      state: 0,
    }
  },
  mounted() {
    setInterval(() => {
      this.state += 1
    }, 1000);
  },
}
</script>

方案二：纯组合式API（Vue3推荐写法） #

在setup中用ref声明响应式变量，确保state的变更能触发组件更新：

<template>
  <div id="app">
    <ChildComponent :state="state"/>
  </div>
</template>

<script setup>
import ChildComponent from './components/ChildComponent.vue'
import { ref, onMounted } from 'vue'

const state = ref(0)

onMounted(() => {
  setInterval(() => {
    state.value += 1
  }, 1000)
})
</script>

子组件优化（可选） #

子组件当前写法已能正常打印更新后的state，若需监听props变化，可添加watch或updated钩子：

<template>
  <div></div>
</template>
<script>
export default {
  name: 'ChildComponent',
  props: ["state"],
  created() {
    setInterval(() => {
      console.log(this.state)
    }, 1000);
  },
  // 监听state变化
  watch: {
    state(newVal) {
      console.log('state更新：', newVal)
    }
  },
  // 组件更新时触发
  updated() {
    console.log('当前state：', this.state)
  }
}
</script>

修改后，父组件state会每秒递增，子组件定时器将打印0 1 2 ...的预期结果，watch和updated钩子也会正常触发。

内容的提问来源于stack exchange，提问作者user6210457