vue3--provide和inject

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

一.跨层传递普通数据

1. 顶层组件通过provide函数提供数据

2. 底层组件通过inject函数获取数据

二.跨层传递响应式数据

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

三.跨层传递方法

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

顶层组件代码

<script setup>
import {inject} from 'vue'


// 1.跨层传递普通数据
const themeColor = inject('theme-color')

// 2.跨层响应式数据
const count = inject('count')

// 3.跨层级传递函数=>给子孙后代传递可以修改数据的方法
const changeCount = inject('changeCount')
const clickFn =()=>{
    // count=1000不可以直接修改
changeCount(1000)
}
</script>
<template>
<div>
  <h3>我是底层组件 ---{{ themeColor }}-----{{count}}</h3>
  <button @click="clickFn">更新count</button>
</div>
</template>

中层组件代码

<script setup>
import BottomCom from './bottom-com.vue'
</script>
<template>
<div>
  <h2>我是中间组件</h2>
  <BottomCom></BottomCom>
</div>
</template>

底层组件代码

<script setup>
import {inject} from 'vue'


// 1.跨层传递普通数据
const themeColor = inject('theme-color')

// 2.跨层响应式数据
const count = inject('count')

// 3.跨层级传递函数=>给子孙后代传递可以修改数据的方法
const changeCount = inject('changeCount')
const clickFn =()=>{
    // count=1000不可以直接修改
changeCount(1000)
}
</script>
<template>
<div>
  <h3>我是底层组件 ---{{ themeColor }}-----{{count}}</h3>
  <button @click="clickFn">更新count</button>
</div>
</template>