VUE3中使用provide/inject（跨组件通信）_vue3 definecomponent怎么使用provider

目录

前言：

使用方法：

举个例子：

前言：

通常，当我们需要从父组件向子组件传递数据时，会使用 props。

想象一下这样的结构：有一些深度嵌套的组件，爷 =>父=>儿=>孙的结构。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦

对于情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有后代组件的依赖提供者。 

使用方法：

1. 父组件有一个 provide 选项来提供数据
2. 子组件有一个 inject 选项来开始使用这些数据。

举个例子：

我们在顶级组件提供一个值，可以写在main.ts中提供currentUser

//provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。
import { createApp } from 'vue'
import App from './App.vue'
 
const app = createApp(App)
app.provide('currentUser', { name: '李世民'}) //传参
app.mount('#app')

在任意后代组件注入

<template>
    <div>
      {{ currentUser && currentUser.name }}
    </div>
</template>
import { defineComponent, inject } from 'vue'
<script lang="ts">
    export default defineComponent({
      setup(props, context) {
        const currentUser = inject<{name: string}>('currentUser')
        return {
          currentUser,
        }
      },
    })
</script>

这样就能拿到currentUser了，也可以提供值的时候在app.vue中，等同于上面main.ts中的操作