Vue3使用provide和inject实现孙组件给爷组件传递数据

gurenchang2024-06-20 10:45

前言：

最近在研究gitHub中的一个项目并将与自己之前完成的项目进行结合，其中有一个功能是需要在孙组件将数据传递给爷组件，笔者研究后将使用总结如下：

具体步骤：

1.爷组件先定义一个空的函数传递给孙子

2.孙组件使用inject接收

3.孙组件在函数中调用爷爷传递过来的函数,并在()中传递要传递的数据

4.调用这个函数（也可以使用点击事件等方式触发）

5.爷组件在当初定义的空函数中获得孙组件传递过来的值tValue

爷组件：

TypeScript 复制代码

<script lang="ts" setup>
import { ref, onMounted, provide } from "vue"
const tValue = ref("")
//1.爷组件先定义一个空的函数传递给孙子
provide("passValue", passValue)
//5.爷组件在当初定义的空函数中获得孙组件传递过来的值tValue
const passValue = (codeValue: string) => {
  tValue.value = value
}
console.log(tValue.value)
</script>

孙组件：

TypeScript 复制代码

<script lang="ts" setup>
import { inject } from "vue"
const value = 2000;
//2.孙组件使用inject接收
const passValue = inject("passValue")
//3.孙组件在函数中调用爷爷传递过来的函数,并在()中传递要传递的数据
const sendValue = () => {
  passValue(value)
}
//4.调用这个函数（也可以使用点击事件等方式触发）
sendValue()
</script>