vue3中 provide，inject 的值子组件可以修改吗

在 Vue 3 中，provide 和 inject 是通过 Reactivity 修饰符来实现的。这意味着，如果在子组件中修改 inject 的值，则会触发响应式更新，并且父组件中的值也会相应地更新。

例如，假设你在父组件中提供了一个名为 message 的值，并在子组件中通过 inject 注入：

// 父组件
<template>
  <div>
    <Child />
  </div>
</template>

<script>
import { provide,ref } from 'vue'
import Child from './Child.vue'

export default {
  components: {
    Child,
  },
  setup() {
    const message = ref('Hello')
    provide('message', message)
    return {
      message,
    }
  },
}
</script>

// 子组件
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return {
      message,
    }
  },
}
</script>

如果在子组件中对 message 进行修改，则父组件中的 message 也会相应地更新：

// 子组件
<template>
  <div>
    {{ message }}
    <button @click="changeMessage">Change message</button>
  </div>
</template>

<script>
import { inject, ref } from 'vue'

export default {
  setup() {
    const message = inject('message')
    function changeMessage() {
      message.value = 'Goodbye'
    }
    return {
      message,
      changeMessage,
    }
  },
}
</script>

因此，在子组件中修改 inject 的值是可以的，但是要注意，这会导致父组件中的值也被修改。