provide 和 inject 跨组件进行数据或功能的共享

概念

provide 和 inject 是 Vue.js 中用于依赖注入的一对配套选项。它们可以用于在组件层次结构中跨组件进行数据或功能的共享

1.provide 选项：

provide是在父组件中定义的选项，用于向其子组件提供数据或方法。它接受一个对象，其中的键是提供的属性名，值是要提供的数据或方法。

2. inject 选项：

inject是在子组件中定义的选项，用于从父组件中注入提供的数据或方法。它接受一个数组或对象，其中的值是要注入的属性名。

需要注意的是，inject 选项只能在子组件中使用，它会从父组件的 provide 中查找匹配的属性。如果父组件没有提供相应的属性，则会回退到默认值或抛出警告。

示例：

以下是一个在Vue 3 中使用 TypeScript和 Composition API（setup 函数）的情况下，使用 provide 和 inject 实现跨组件的依赖注入

-----父组件👇-----

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script lang="ts">
import { defineComponent, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },
  setup() {
    const sharedData = 'Some shared data';
    const sharedMethod = () => {
      // 共享的方法逻辑
    };

	// 用Symbol()定义键的名字
	const dataKey = Symbol('sharedData');
	const methodKey = Symbol('sharedMethod');

    provide(dataKey, sharedData);  // 提供了共享数据sharedData
    provide(methodKey, sharedMethod);   // 提供了共享方法sharedMethod

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

1. 定义一个父组件，并在 setup 函数中使用 provide 来提供共享的数据和方法
2. 使用字符串键（例如 ‘sharedData’ 和 ‘sharedMethod’）来标识提供的属性，在vue3中，通常使用Symbol提供安全的键
3. 然后，我们在模板中使用了一个子组件 ChildComponent，它可以通过 inject 选项来注入父组件提供的数据和方法

-----子组件👇-----

<template>
  <div>
    <p>{{ sharedData }}</p>
    <button @click="sharedMethod">Call Shared Method</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue';

export default defineComponent({
  setup() {
    const sharedData = inject<string>('sharedData');  // 注入父组件提供的数据
    const sharedMethod = inject<() => void>('sharedMethod');  // 注入父组件提供的方法

    return {
      sharedData,
      sharedMethod,
    };
  },
});
</script>

在子组件 ChildComponent 中，我们使用 inject 函数来注入父组件提供的共享数据和方法。并指定了相应的类型参数（例如 string 和 () => void），以确保正确的类型推断

这样，父组件提供的数据和方法就能够在子组件中进行注入和使用了