Vue 父子组件数据同步：如何让子组件响应父组件值变化

这种情况通常是因为父组件中的值没有正确传递给子组件，或者子组件没有正确接收父组件传递的值。

首先，请确保在父组件中正确传递了值给子组件。可以使用 props 属性将父组件中的值传递给子组件。例如：

<template>
  <div>
    <ChildComponent :value='parentValue' />
  </div>
</template>

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

export default {
  data() {
    return {
      parentValue: 'Hello World'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

在子组件中，需要使用 props 属性接收父组件传递的值。例如：

<template>
  <div>
    <p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  props: ['value']
};
</script>

这样，当父组件中的 `parentValue` 发生变化时，子组件中的 `value` 也会自动更新。

如果父组件中的值已经正确传递给子组件，但子组件的值仍未更新，可能是因为子组件没有正确响应父组件的变化。在 Vue 中，子组件的 props 是单向绑定的，默认情况下，子组件无法修改 props 的值。如果需要在子组件中修改 props 的值，可以使用 `v-model` 或 `$emit` 来实现双向绑定。

如果你希望子组件能够修改 props 的值，可以使用 `v-model` 来实现双向绑定。例如：

<template>
  <div>
    <input v-model='value' />
  </div>
</template>

<script>
export default {
  props: ['value']
};
</script>

这样，当子组件中的输入框发生变化时，父组件中的 `parentValue` 也会自动更新。

如果你不希望使用 `v-model`，可以使用 `$emit` 来触发一个自定义事件，在父组件中监听该事件并更新相应的值。例如：

<template>
  <div>
    <input @input='updateValue' />
  </div>
</template>

<script>
export default {
  methods: {
    updateValue(event) {
      this.$emit('update:value', event.target.value);
    }
  }
};
</script>

在父组件中，需要监听子组件触发的事件，并更新相应的值。例如：

<template>
  <div>
    <ChildComponent :value='parentValue' @update:value='updateParentValue' />
  </div>
</template>

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

export default {
  data() {
    return {
      parentValue: 'Hello World'
    };
  },
  methods: {
    updateParentValue(value) {
      this.parentValue = value;
    }
  },
  components: {
    ChildComponent
  }
};
</script>

这样，当子组件中的输入框发生变化时，父组件中的 `parentValue` 也会自动更新。