vue3子组件直接修改父组件值不报错

在 Vue3 中，如果子组件想要直接修改父组件的数据，通常需要通过 `ref` 或者 `$parent` 关联来做到数据穿透。因为 Vue 的单向数据流原则（Parent to Child），默认情况下子组件是无法直接修改父组件的属性的，这防止了意外的副作用。

1. 使用 `ref` 对象：在父组件中创建一个 ref 并传给子组件，然后在子组件里可以直接读取和更新这个 ref。例如：

// 父组件
export default {
  setup() {
    const value = ref(0);
    return { value };
  }
};

// 子组件
<template>
  <button @click="increaseValue">增加</button>
</template>

<script>
import { onMounted } from 'vue';
export default {
  methods: {
    increaseValue() {
      this.$parent.value++; // 直接修改父组件的 ref 值
    },
  },
};
</script>

2. 使用 `$parent`：在 Vue 2.x 中可以使用 `$parent` 访问上一层级的实例，但在 Vue 3 中推荐使用 Composition API，因此 `$parent` 不再常用，除非是在一些特殊场景下作为过渡期。

由于这样的操作可能会导致状态管理混乱，Vue 提倡使用 props、自定义事件（$emit/$on）或者 Vuex、Pinia 等更明确的方式来维护父子组件间的通信。如果这样做不报错，可能是暂时未触发变更检测规则，但长期来看不是最佳实践。