Vue3是否可以更改子端提供->注入给出的数据？

Question

正如主题中所写，

在 vue 中，

Provide 用于将数据从父级传递给子级。

子元素通过注入获取数据。

正如 @emit 所做的那样，是否也可以修改子元素中“provide”给出的数据？

谢谢。

Answer 1

是的，一个组件可以provide由它ref的后代更新inject：

// App.vue
export default {
  setup() {
    const counter = ref(0)
    provide('counter', counter)
  }
}

// ComponentA.vue
export default {
  setup() {
    const counter = inject('counter')

    return {
      counter,
      increment: () => counter.value++  // updates App.counter
    }
  }
}

演示1

然而，Vue 文档还建议provide使用 update 方法，使突变和状态保持在同一位置：

// App.vue
export default {
  setup() {
    const counter = ref(0)
    provide('counter', counter)
    provide('increment', () => counter.value++)
  }
}

// ComponentA.vue
export default {
  setup() {
    return {
      counter: inject('counter'),
      increment: inject('increment'),
    }
  }
}

演示2