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

前言:

最近在研究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>
相关推荐
哟哟耶耶11 分钟前
React-04React组件状态(state),构造器初始化state以及数据读取,添加点击事件并更改state状态值
前端·javascript·react.js
kiramario17 分钟前
用IconContext.Provider修改react-icons的icon样式
前端·javascript·react.js
destinyol18 分钟前
React首页加载速度优化
前端·javascript·react.js·webpack·前端框架
程序员小续18 分钟前
React 多个 HOC 嵌套太深,会带来哪些隐患?
java·前端·javascript·vue.js·python·react.js·webpack
大猫会长1 小时前
用AbortController取消事件绑定
前端
程序员小杰@1 小时前
AI前端组件库Ant DesIgn X
开发语言·前端·人工智能
致微2 小时前
Vue项目 bug 解决
前端·vue.js·bug
慕斯策划一场流浪2 小时前
fastGPT—nextjs—mongoose—团队管理之部门相关api接口实现
前端·javascript·html·fastgpt部门创建·fastgpt团队管理·fastgpt部门成员更新·fastgpt部门成员创建
我自纵横20233 小时前
事件处理程序
开发语言·前端·javascript·css·json·ecmascript
坊钰3 小时前
【MySQL 数据库】数据类型
java·开发语言·前端·数据库·学习·mysql·html