【Vue】provide和inject

一、作用和场景

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

---

二、跨层传递普通数据

实现步骤

1. 顶层组件通过 provide 函数提供数据
2. 底层组件通过 inject 函数接收数据

并且这两个键名要统一

---

三、跨层传递响应式数据

在调用provide函数时，第二个参数设置为ref对象

---

三、跨层传递方法

顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据

App.vue

<script setup>
import CenterCom from '@/components/center-com.vue'
import { provide, ref } from 'vue'

// 1. 跨层传递普通数据
provide('theme-color', 'pink')

// 2. 跨层传递响应式数据
const count = ref(100)
provide('count', count)

setTimeout(() => {
  count.value = 500
}, 2000)

// 3. 跨层传递函数 => 给子孙后代传递可以修改数据的方法
provide('changeCount', (newCount) => {
  count.value = newCount
})

</script>

<template>
<div>
  <h1>我是顶层组件</h1>
  <CenterCom></CenterCom>
</div>
</template>

center-com.vue

<script setup>
import BottomCom from './bottom-com.vue'
</script>

<template>
<div>
  <h2>我是中间组件</h2>
  <BottomCom></BottomCom>
</div>
</template>

bottom.vue

<script setup>
import { inject } from 'vue'
const themeColor = inject('theme-color')
const count = inject('count')
const changeCount = inject('changeCount')
const clickFn = () => {
  changeCount(1000)
}
</script>

<template>
<div>
  <h3>我是底层组件-{{ themeColor }} - {{ count }}</h3>
  <button @click="clickFn">更新count</button>
</div>
</template>