vue3props改变子组件不更新

在 Vue.js 中，如果父组件通过 props 向子组件传递数据，子组件内部对 prop 的修改通常不会直接反映到父组件上，这是 Vue 的单向数据流设计所决定的，目的是为了防止意外的数据污染。如果你想要让子组件的 prop 改变后父组件能感知到并更新视图，可以采取以下策略：

1. **深度监听（Deep Watch）**：在子组件中使用 `watch` 或者第三方库如 `vue-property-decorator` 的 `@Watch` 装饰器，监听 prop 变化。

export default {
  watch: {
    myProp: {
      deep: true,
      handler(newVal) {
        // 更新父组件的状态或其他操作
        this.$emit('parent-updated', newVal);
      },
      immediate: true, // 如果需要立即触发第一次更新
    }
  }
}

2. **自定义事件（Custom Event）**：当子组件的 prop 发生变化时，主动通过 `$emit` 触发一个自定义事件通知父组件。

this.$emit('prop-changed', this.myProp);

然后在父组件中监听这个事件：

<child-component @prop-changed="handleNewProp"></child-component>

methods: {
  handleNewProp(newProp) {
    // 更新父组件状态
  }
}

3. **父子通信（Parent-to-Child）**：利用 Vue 的 `ref` 和 `$emit` 进行数据双向绑定，如果允许，可以在子组件中直接修改 ref 对象而不是 prop。

// 父组件
<child-component :myRef="parentRef"></child-component>

<script>
const parentRef = ref(null);

export default {
  setup() {
    return { parentRef };
  }
};
</script>

// 子组件
methods: {
  updateValue() {
    this.parentRef.value = newValue; // 直接更新 ref 对象
  }
}