从零开始Vue3+Element Plus后台管理系统(21)——provide & inject

父子组件传值最常使用props。假设现在有一个多层嵌套的组件，如上图所示，曾孙组件需要获取父组件中的一个变量，而子组件和孙子组件不需要这个变量。为了让曾孙拿到值，需要通过Props逐级向下传递，这一问题被称为“prop 逐级透传”，显然这会让我们觉得繁琐。

Vue3提供了provide和inject来解决上面的问题（Vue2同样提供），无需层层传递，父组件可以直接把值提供给曾孙组件。

一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

父组件提供

import { provide } from 'vue'

provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

后代组件接收

import { inject } from 'vue' 

const message = inject('message')

如果父组件提供的值是异步获取的，也同样简单，下面是个简单的例子

// 父组件
<template>
  <div class="p-4 m-4 bg-white">
    <h2>我是父组件</h2>
    <Son class="p-4 m-4 border" />
  </div>
</template>

<script setup lang="ts">
import { provide, ref } from 'vue'
import Son from './son.vue'
import clientApi from '~/api/client'

let clientData = ref()
let clientName = ref('')

provide('message', 'hello')
provide('clientName', clientName)

async function getClientDetails() {
  clientData.value = await clientApi.getClientDetails('1')
  clientName.value = clientData.value.name
}

getClientDetails()
</script>

// 子组件
<template>
  <div>我是子组件<Grandson class="p-4 m-4 border" /></div>
</template>

<script setup lang="ts">
import Grandson from './grandson.vue'
</script>

// 孙子组件
<template>
  <div>
    <h4 class="mb-2">我是孙子组件，下面的值来自祖先组件</h4>
    <div class="text-blue-400">{{ message }}，{{ clientName }}</div>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'

const message = inject('message')
const clientName = inject('clientName')
</script>

最后的效果

当我们在开发一个复杂的页面，需要把它层层拆分的时候，provide和inject就会显示出它的优势。

需要更深入的了解它们，请参考vue官方文档：cn.vuejs.org/guide/compo…