reative 怎么实现provide/inject 响应式

在Vue中，提供和注入响应式数据可以通过使用`provide`和`inject`来实现。

首先，在父组件中，使用`provide`将数据暴露给子组件。例如：

// 父组件
export default {
  provide: {
    sharedData: 'Hello World'
  }
}

然后，在子组件中，使用`inject`来接收父组件提供的数据。例如：

// 子组件
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData); // 输出 'Hello World'
  }
}

在上面的例子中，子组件通过`inject`接收到了父组件提供的`sharedData`数据，并且可以在子组件中直接访问和使用该数据。

需要注意的是，`provide`和`inject`并不是响应式的。如果需要实现响应式的数据传递，可以结合使用Vue的响应式机制，例如使用`ref`或`reactive`。

以下是一个使用`reactive`结合`provide`和`inject`来实现响应式数据传递的例子：

import { reactive, provide, inject } from 'vue';

// 创建一个响应式数据对象
const sharedData = reactive({
  message: 'Hello World'
});

// 在父组件中使用provide提供响应式数据
provide('sharedData', sharedData);

// 在子组件中使用inject接收响应式数据
export default {
  setup() {
    const data = inject('sharedData');
    console.log(data.message); // 输出 'Hello World'
  }
};

在上面的例子中，我们使用`reactive`创建了一个响应式数据对象`sharedData`，然后通过`provide`将其提供给子组件。子组件通过`inject`接收到了响应式的数据，并且可以在子组件中直接访问和修改该数据。