如何在 Vue 3 中提供/注入响应式以避免 props 钻探？

Question

我有一个根组件，它有很多后代。为了避免 props 钻探，我想使用provide/inject。

在设置函数的根组件中，我使用

provide

。 在设置函数的子组件中，我通过

inject

获取值。

然后子组件可能会发出一个事件，强制根组件重新加载它提供给子组件的数据。

但是子组件中的数据并没有改变。

我之前发现的答案通常与 Vue 2 有关，而我正在努力解决 Vue 3 组合 API。

我尝试使用watch/watchEffect，并“重新提供”数据，但它不起作用（并且我不确定这是否是一个好的解决方案）。

示例代码：https://codesandbox.io/s/mystifying-diffie-e3eqyq

Answer 1

我不想成为那样的人，但请阅读文档！ 无论如何：

应用程序.vue

 setup() {
    let randomNumber = ref(Math.random());

    function updateRandomNumber() {
      randomNumber.value = Math.random()
    }
    // This should be an AJAX call to re-configurate all the children
    // components. All of them needs some kind of config.
    // How to "re-provide" the data after a child component asked this?


    provide("randomNumber", {
      randomNumber,
      updateRandomNumber
    });
  },

ChildComponent.vue

<template>
  <div>Child component</div>
  <button @click="updateRandomNumber">Ask root component for re-init</button>
  <div>Injected data: {{ randomNumber }}</div>
</template>

<script>
import { inject } from "vue";

export default {
  setup() {
    // How to "re-inject" the data from parent?
    const {randomNumber, updateRandomNumber} = inject("randomNumber");

    return {
      randomNumber,
      updateRandomNumber
    };
  },
};
</script>

Answer 2

我发现的最简单的解决方案是提供一个反应式配置对象，并根据需要更改其中的任何选项。这适用于任何方向，因此树中的任何组件都可以更改结果。

注意：这应该只在受信任的组件树中完成（任何有权访问提供的组件都应该能够更改值是可以的），这应该与OP的设计一致。

家长

// ...
const configs = reactive( { mySetting : false } );
provide( "configs", configs );
// ...

// Parent can change the setting at any point, and child will be updated.
configs.mySetting = true;
// ...

孩子

// ...
const configs = inject( "configs", { } );
// ...

// Child can now change the setting, and parent will be updated.
configs.mySetting = true;
// ...