Provider和inject跨层数据传递

1）用处

        中提到了父子通信，这里要讨论的时爷孙或者更多层数据传递。

        Provider用于顶层组件发送数据，inject用于底层组件接收数据。

2）用法

        准备好顶层组件（爷组件）中间组件，底层组件（孙组件），在顶层组件中引入provider工具，该函数有两个参数，key和value。

        顶层组件：

import { provide ,ref} from 'vue';
import content from './content.vue';

provide("data-key","顶层爷组件数据")
const count = ref(0)
provide("count-key",count)
const addCount = () =>{
  count.value++
}
provide("addCount-key",addCount)




  <button @click="addCount">{{ count }}</button>

        底层组件中应引入inject包，inject函数用于接收provide中存入的数据，参数是顶层组件存入的键。

        底层组件

<script setup>
import { inject } from 'vue';
const vueData = inject("data-key")
const count = inject("count-key")
const addCount = inject("addCount-key")
</script>

<template>
    <div>
        当前文件为底层组件
        <div>
            来自顶层组件普通数据：{{ vueData }} <br>
            来自顶层组件响应数据：{{ count }}
            <button @click="addCount">{{ count }}</button>
        </div>
    </div>
</template>

        Provider和inject传输数据时只能单向传递，只能顶层组件向底层组件传递，不能反向。传递的数据可以是任何类型，包括函数。