Vue.js父进程不向子进程发送更新的数据

<!-- 父组件 -->
<template>
  <ChildComponent :parentData="data" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const data = ref('initial value');

    // 模拟数据更新
    setTimeout(() => {
      data.value = 'updated value';
    }, 1000);

    return { data };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ parentData }}</div>
</template>

<script>
import { watch } from 'vue';

export default {
  props: {
    parentData: String
  },
  setup(props) {
    // 监听props的变化
    watch(() => props.parentData, (newValue, oldValue) => {
      console.log(`Data changed from ${oldValue} to ${newValue}`);
    });
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="updateParent">Update Parent</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup(props, { emit }) {
    const updateParent = () => {
      emit('update:data', 'new value');
    };

    return { updateParent };
  }
};
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @update:data="handleUpdate" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const handleUpdate = (newValue) => {
      console.log(`Parent received new value: ${newValue}`);
    };

    return { handleUpdate };
  }
};
</script>

// store.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      data: 'initial value'
    };
  },
  mutations: {
    updateData(state, newValue) {
      state.data = newValue;
    }
  }
});

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

<script>
import { useStore } from 'vuex';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const store = useStore();

    // 更新状态
    setTimeout(() => {
      store.commit('updateData', 'updated value');
    }, 1000);

    return {};
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ data }}</div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const data = computed(() => store.state.data);

    return { data };
  }
};
</script>