vue3的provide与inject

在Vue3中，provide和inject是一对用于跨组件传递数据的配对选项。provide选项允许我们在父组件中提供数据，而inject选项允许子组件中使用该数据。通过这种方式，我们可以在组件树中的任何地方共享数据，而不需要通过props一层层传递。

具体使用provide和inject的步骤如下：
1. 在父组件中使用provide选项提供数据，可以是单个数据或者是一个对象。例如，可以在父组件中提供一个名为data的数据：

provide() {
  return {
    data: 'Hello Vue!'
  }
}

2. 在子组件中使用inject选项来注入需要使用的数据。例如，在子组件中注入名为data的数据：

inject: ['data']

3. 然后就可以在子组件中直接使用注入的数据了。例如，在子组件的模板中输出注入的数据：

<p>{{ data }}</p>