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>
相关推荐
一城烟雨_4 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想5 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师6 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧6 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信7 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子7 小时前
CSS单位完全指南
前端·css
SunTecTec8 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
软件技术NINI8 小时前
html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码
javascript·css·html
涵信8 小时前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
codingandsleeping8 小时前
Express入门
javascript·后端·node.js