Prop 逐级透传问题

当组件嵌套很深的时候，深层的组件需要获取很外层的祖先组件的属性时，如果还使用prop逐渐传递会很麻烦，那么就可以使用provide/inject。provide用来提供数据，inject用来获取数据。

provide

为后代提供数据, provide(注入名, 注入值)。注入值可以是任意类型的值，也可以是ref响应式数据。一个组件挡住可以写多个provide()

import {ref, provide} from 'vue'
const count = 0
const ref sum = ref(0)

provide('count', count)
provide('sum', sum)

应用层provide

这个provide在整个应用的任意位置组件都可以使用inject获取

import { createApp } from 'vue'

const app = createApp({})

app.provide('message', 'vue3')

inject

用来获取provide提供的数据。inject(注入名)。

import {inject} from 'vue'
// 获取应用层提供的 `message`
console.log(inject(message)) // vue3

一个完整的provide/inject示例:

<!-- 爷爷组件：mess -->
<script setup>
import { ref, provide } from 'vue'
import Child from './Child.vue'
  
const message = ref('hello')
provide('message', message)
</script>

<template>
  <input v-model="message">
  <Child />
</template>

<!-- child组件，是mess组件的子组件 -->
<script setup>
import GrandChild from './GrandChild.vue'
</script>

<template>
  <GrandChild />
</template>

<!-- GrandChild组件是Child组件的儿子，mess组件的孙子 -->
<script setup>
import { inject } from 'vue'

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

<template>
  <p>
    Message to grand child: {{ message }}
  </p>
</template>

最终运行效果:

文本框输入什么，下面显示什么

修改provide提供的响应式数据:

一般修改响应式数据建议在提供数据的组件中修改，这样易于维护。如果要在inject组件中修改数据建议在provide组件中提供一个更改数据的函数一并传递出去。

import { provide, ref } from 'vue'

const number = ref(0)

const updata () => {
  number.value = 1
}

provide('number', {
  number,
  updata
})

// 注入方
import { inject } from 'vue'

const { number, updata } = inject('number')

 <button @click="updata">{{ number }}</button>