Vue3组件与Props响应式问题：子组件值未更新如何处理？

方案一：子组件维护本地显示状态 #

由于Vue的props遵循单向数据流，父组件不更新状态时，子组件的props不会自动变化。可以让子组件内部维护一个本地ref控制显示，同时监听父组件props的变化以保持同步：

修改后的CompA代码：

<template>
  <div>
    <h2>CompA</h2>
    <p>Value received from the parent: {{ localValue }}</p>
    <button @click="emitValue">Emit Value</button>
  </div>
</template>

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

export default {
  props: {
    value: {
      type: Number,
      required: true,
    },
  },
  emits: ['change'],
  setup(props, { emit }) {
    // 初始化本地值为父组件传入的value
    const localValue = ref(props.value);

    // 监听父组件props变化，同步更新本地值
    watch(
      () => props.value,
      (newVal) => {
        localValue.value = newVal;
      }
    );

    const emitValue = () => {
      const newValue = 9;
      // 先更新本地显示值
      localValue.value = newValue;
      // 再向父组件emit事件
      emit('change', newValue);
    };

    return {
      localValue,
      emitValue,
    };
  },
};
</script>

父组件代码无需修改：点击子组件按钮时，子组件会先将localValue设为9并展示；父组件因9≤10不更新amount，子组件的localValue不会被父组件props覆盖，保持显示9。若后续父组件amount被其他逻辑修改，watch会同步更新子组件的localValue。

方案二：父组件维护专门的展示状态 #

在父组件中新增一个用于子组件展示的状态，优先响应子组件的emit值，再根据条件决定是否更新业务状态：

修改后的父组件代码：

<template>
  <div>
    <CompA :value="displayValue" @change="onChange"/>
  </div>
</template>

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

export default {
  components: {
    CompA,
  },
  setup() {
    const amount = ref(0);
    // 新增displayValue用于子组件展示
    const displayValue = ref(amount.value);

    const onChange = (data) => {
      // 先更新展示值，让子组件立即显示emit的内容
      displayValue.value = data;
      // 再判断是否更新业务状态amount
      if (data > 10) {       
          amount.value = data;
      }
      // 当data≤10时，不更新amount，displayValue保持emit的data值
    };

    // 监听业务状态amount的变化，同步更新展示值（如果amount被其他逻辑修改）
    watch(
      amount,
      (newVal) => {
        displayValue.value = newVal;
      }
    );

    return {
      displayValue,
      onChange,
    };
  },
};
</script>

这种方式将显示逻辑放在父组件，适合需要统一控制展示状态的场景。

修正原代码中的错误 #

你原来的CompA代码里defineEmits使用有误，正确用法是将其返回值赋值给emit变量：

// 错误写法
defineEmits('change');
const emitValue = () => {
  emit('change', 9); // emit未定义，会报错
};

// 正确写法
const emit = defineEmits('change');
const emitValue = () => {
  emit('change', 9);
};

或者通过setup的第二个参数获取emit：

setup(props, { emit }) {
  const emitValue = () => {
    emit('change', 9);
  };
}

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