vue3 inject provide 如何实现响应式

在 Vue3 中，使用 provide 和 inject 来实现组件之间的传值。如果你想通过 provide 和 inject 实现响应式数据的传递，可以使用 reactive 函数来创建响应式对象，然后再将其提供给子组件。

具体实现步骤如下：

1. 在父组件中使用 reactive 函数创建一个响应式对象，并将其作为 provide 的值提供给子组件。

import { reactive, provide } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    provide('state', state);

    return {
      state,
    };
  },
};

2. 在子组件中使用 inject 来获取父组件提供的响应式对象。

import { inject } from 'vue';

export default {
  setup() {
    const state = inject('state');

    return {
      state,
    };
  },
};

3. 在子组件中使用 state 对象中的属性，当属性值发生改变时，子组件会自动更新。

<template>
  <div>
    Count: {{ state.count }}
  </div>
</template>

<script>
  export default {
    setup() {
      const state = inject('state');

      return {
        state,
      };
    },
  };
</script>

这样，当父组件中的 state.count 发生改变时，子组件中的 {{ state.count }} 也会自动更新。