Vue组合式API---provide和inject跨层传递函数示例

通过provide和inject除了可以跨层传递数据以外，也可以跨层传递函数，即在顶层组件中定义函数，负责修改顶层组件的数据，这个函数可以传递给底层组件，在底层组件中调用顶层组件的函数。

App.vue文件：

<script setup>
import RoomPage from './components/provide/room-page.vue'

</script>

<template>
  <div>
    <RoomPage></RoomPage>
  </div>
</template>

<style scoped></style>

顶层组件room-page.vue：

<script setup>
import RoomMsgItem from './room-msg-item.vue'
import { provide, ref } from 'vue'

// 组件嵌套关系：
// RoomPage -> RommMsgItem -> RoomMsgComment

// 传递响应式数据
const count = ref(100)
provide('count-key', count)

// 传递方法
const setCount = () => {
    count.value++
}
provide('setCount-key', setCount)
</script>

<template>
    <div class="page">
        顶层组件
        <RoomMsgItem></RoomMsgItem>
    </div>
</template>

<style scoped></style>

中间组件room-msg-item.vue：

<script setup>
import RoomMsgComment from './room-msg-comment.vue'
</script>

<template>
    <div>
        中间组件
        <RoomMsgComment></RoomMsgComment>
    </div>
</template>

<style scoped></style>

底层组件room-msg-comment.vue：

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

// 接收响应式数据
const countData = inject('count-key')

// 接收方法
const setCount = inject('setCount-key')
</script>

<template>
    <div class="comment">
        底层组件
        <div>
            来自顶层组件的响应式数据---{{ countData }}
        </div>
        <div>
            <button @click="setCount">修改顶层组件的数据</button>
        </div>
    </div>
</template>

<style scoped></style>

到浏览器中查看效果：

点击按钮：