vue3使用provider+ inject直接将参数由祖宗传送给孙子

本文主要是介绍vue3使用provider+ inject直接将参数由祖宗传送给孙子,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

如题。在vue项目中,如果祖宗想将参数传递给孙子甚至更小一辈的组件,是一件麻烦事。可以通过爷爷-儿子-孙子-曾孙这样的链条,一辈辈地传承下去,但未免太繁琐、太蠢了些;也可以通过store间接传送,但如何触发孙子们去获取是个问题。

第三种方法是通过provider和inject方式。老祖宗provider,后代inject。在以下示例中,祖宗页面将一个json对象传给孙辈。其中,祖宗provider一个函数,函数返回一个json对象state。孙辈inject该函数,接收传递过来的state,并监听里面的元素state.now。当state.now变化时,将重新获取整个state,以达到老祖宗与孙辈持续刷新参数并传递的目的。

1、祖宗页面

grandFather.vue

<template><div><input type="text" v-model="state.param1" /><input type="text" v-model="state.param2" /><input type="text" v-model="state.param3" /></div><div><input type="button" value="传送参数" @click="sendParams" /></div>
</template><script setup>
import { reactive, provide, ref } from "vue";const state = reactive({param1:0,param2:0,	param3:0,	now: 0,
});const getParams = ref(() => {return state;
});
provide("sensorTjParams", getParams);function sendParams(){state.now = Date.now();//将当前时间赋给state.now,利于孙子监听state.now,一旦变化,说明有新参数传来。
}
</script>

2、孙子页面

grandSon.vue

//getParams()可以获取到爷爷的整个state变量。
const getParams = inject("sensorTjParams", ref({ now: 0 }));/** 特别注意爷爷传过来的state.now()*/
const windVane = computed(() => {return getParams.value().now;
});watch(windVane, () => {//监听state.now//有新参数到,干活吧。。。
});

3、小结

1)上例中,provide与inject的,是函数

2)孙辈通过computed,特别关注传递过来的json对象的其中一个元素now

3)监听这个now

4)当祖宗想通知孙辈刷新参数时,只须改变这个now的值

这篇关于vue3使用provider+ inject直接将参数由祖宗传送给孙子的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/421297

相关文章

SpringBoot接收JSON类型的参数方式

《SpringBoot接收JSON类型的参数方式》:本文主要介绍SpringBoot接收JSON类型的参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、jsON二、代码准备三、Apifox操作总结一、JSON在学习前端技术时,我们有讲到过JSON,而在

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

Maven pom.xml文件中build,plugin标签的使用小结

《Mavenpom.xml文件中build,plugin标签的使用小结》本文主要介绍了Mavenpom.xml文件中build,plugin标签的使用小结,文中通过示例代码介绍的非常详细,对大家的学... 目录<build> 标签Plugins插件<build> 标签<build> 标签是 pom.XML

JAVA虚拟机中 -D, -X, -XX ,-server参数使用

《JAVA虚拟机中-D,-X,-XX,-server参数使用》本文主要介绍了JAVA虚拟机中-D,-X,-XX,-server参数使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录一、-D参数二、-X参数三、-XX参数总结:在Java开发过程中,对Java虚拟机(JVM)的启动参数进

Java中使用注解校验手机号格式的详细指南

《Java中使用注解校验手机号格式的详细指南》在现代的Web应用开发中,数据校验是一个非常重要的环节,本文将详细介绍如何在Java中使用注解对手机号格式进行校验,感兴趣的小伙伴可以了解下... 目录1. 引言2. 数据校验的重要性3. Java中的数据校验框架4. 使用注解校验手机号格式4.1 @NotBl

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

Python使用DeepSeek进行联网搜索功能详解

《Python使用DeepSeek进行联网搜索功能详解》Python作为一种非常流行的编程语言,结合DeepSeek这一高性能的深度学习工具包,可以方便地处理各种深度学习任务,本文将介绍一下如何使用P... 目录一、环境准备与依赖安装二、DeepSeek简介三、联网搜索与数据集准备四、实践示例:图像分类1.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效