作用:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信
跨层传递普通数据、响应式数据、方法:
1.顶层组件通过project函数提供数据
2.底层组件通过inject函数获取数据
Test组件:
<!--provide和inject组合式API-->
<!--作用:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信-->
<script setup>
import Test2 from "./Test2 .vue";
import {provide, ref} from "vue";
// 组件嵌套关系
// Test -> Test1 ->Test2
// 1.顶层组件提供数据 provide('key','传递的数据')
//传递普通数据
provide('data-key', 'this is room data')
//传递响应式数据
const count = ref(0)
provide('count-key', count)
setTimeout(() => {
count.value = 100
}, 3000)
// 传递方法(谁的数据谁负责修改)
const setCount = () => {
count.value++
}
provide('setCount-key', setCount)
</script>
<template>
<div>
<h2>顶层组件</h2>
<Test2 ></Test2 >
</div>
</template>
Test2组件:
<script setup>
import {inject} from "vue";
// 2. 接收数据
// 接收普通数据
const roomData = inject('data-key')
// 接收响应式数据
const countData = inject('count-key')
// 接收方法
const setCountData = inject('setCount-key')
</script>
<template>
<h2>底层组件</h2>
<div>来自顶层组件中的数据为:{{ roomData }}</div>
<h3>来自顶层组件中响应式数据为:{{countData}}</h3>
<button @click="setCountData">修改顶层组件的数据</button>
</template>