provide,inject父传子

这个方法传递子参数,可以让所有的子组件获取到,不能子组件传递给父组件

父组件

说下大概思路,导入privode,然后使用privode方法,有点像redis,key value形式存值,子组件可以通过key来获取你要传的值。你传过去是对象,那么它就是对象,如果你传过去的是数组,那么它就是数组,如果你传过去的是响应式对象,那么它就是响应式对象。这里有可能我理解有错,因为我就尝试传过去个对象或者一个响应式对象,我主要意思就是可以传响应式对象。

<template><Demo4Chiren2 @begin="handleCustomEvent" ref="demoChild" /><button @click="callChildMethod">调用子组件方法</button><p>子组件数据: {{ childData }}</p><demo4-chiren><a href="#">插槽</a></demo4-chiren><VueFooter><template v-slot:url><a href="#">wang</a></template>
</VueFooter>
<!--  <div>-->
<!--    <el-button link type="primary" size="small" @click="handlePrint" id="printTable">-->
<!--      打印-->
<!--    </el-button>-->
<!--    <el-button link type="primary" size="small" @click="print">-->
<!--      返回-->
<!--    </el-button>-->
<!--    <el-table :data="tabledata" style="width: 100%">-->
<!--      <el-table-column fixed prop="date" label="Date" width="150" />-->
<!--      <el-table-column prop="name" label="Name" width="120" />-->
<!--      <el-table-column prop="state" label="State" width="120" />-->
<!--      <el-table-column prop="city" label="City" width="120" />-->
<!--      <el-table-column prop="address" label="Address" width="600" />-->
<!--      <el-table-column prop="zip" label="Zip" width="120" />-->
<!--    </el-table>-->
<!--  </div>--></template><script>
//provide 把父组件所有信息传递给所有子组件
import { defineComponent, ref ,provide } from 'vue';
import VueFooter from "./vueFooter.vue";
import Demo4Chiren2 from './Demo4Chiren2.vue';
import Demo4Chiren from "./demo4Chiren.vue";// 请根据实际路径调整
export default defineComponent({components: {VueFooter,Demo4Chiren,Demo4Chiren2},setup() {const web = {name:"zzzz",url:"#"};// provide("provideWeb",web)//provide 把父组件所有信息传递给所有子组件provide("web",web);const demoChild = ref(null);const childData = ref('');const handleCustomEvent = (data) => {console.log('接收到子组件数据:', data);// childData.value = data.message;};const callChildMethod = () => {if (demoChild.value) {console.log(demoChild.value.sayHi());}};const handlePrint = ()=>{}return {demoChild,childData,handleCustomEvent,callChildMethod,web};}
});
</script>

子组件

导入inject,然后inject方法去key,value取值即可

<template><div>{{ fullName }}</div><slot></slot>
<!--  <div>{{web.name}}</div>-->
</template><script>
//子组件通过inject获取父组件传下来的信息
import { ref, computed,inject} from 'vue';export default {setup() {// 根据key去获取,根据父组件传过来是啥就是啥,如果是响应式数据,那么它就是响应式数据const web = inject('web')console.log("provideUser",web)const firstName = ref('Jane');const lastName = ref('Doe');const fullName = computed(() => firstName.value + ' ' + lastName.value);return { fullName,web };}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/54243.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#事件的用法

前言 在C#中&#xff0c;事件&#xff08;Event&#xff09;可以实现当类内部发生某些特定的事情时&#xff0c;它可以通知其他类或对象。事件是基于委托&#xff08;Delegate&#xff09;的&#xff0c;委托是一种类型安全的函数指针&#xff0c;它定义了方法的类型&#xff…

昂科烧录器支持Senasic琻捷电子的蓝牙低功耗芯片SNP746

芯片烧录行业领导者-昂科技术近日发布最新的烧录软件更新及新增支持的芯片型号列表&#xff0c;其中Senasic琻捷电子的蓝牙低功耗芯片SNP746已经被昂科的通用烧录平台AP8000所支持。 SNP746是一款蓝牙低功耗芯片&#xff0c;集成了压力传感器和加速度传感器的测量电路。它是为…

Python知识点:深入理解Python的模块与包管理

开篇&#xff0c;先说一个好消息&#xff0c;截止到2025年1月1日前&#xff0c;翻到文末找到我&#xff0c;赠送定制版的开题报告和任务书&#xff0c;先到先得&#xff01;过期不候&#xff01; 深入理解Python的模块与包管理 Python的模块和包是代码组织、复用和分发的基本…

git报错:无法读取远程分支 ‘origin‘ does not appear to be a git repository

问题分析 push上传的时候本地分支和远程分支断开连接 所以重新链接即可 排查问题 1. 查看是否有分支&#xff0c;检查分支是否正确 git branch -v 2. 查看连接是否断开&#xff0c;断开无内容展示 查看远程仓库详细信息&#xff0c;可看到仓库地址 git remote -v 解决…

FPGA随记——FPGA时序优化小经验

为什么要做时序优化&#xff1a; 1.一般是低端芯片或者软件做的比价差&#xff0c;就会导致时序不好过&#xff0c;需要我们代码设计上或者软件约束上进行时序优化。 2.或者设计中频点的提升&#xff0c;时序收敛会比较难&#xff0c;需要优化。 3.时钟方案的复杂&#xff0…

Linux 信号的产生

1. 概念 在Linux系统中&#xff0c;信号是一种进程间通信的机制&#xff0c;它允许操作系统或其他进程向特定进程发送异步通知。我们可以通过命令 kill -l来查看信号的种类&#xff1a; Linux系统中的信号可以分为两大类&#xff1a;传统信号和实时信号。从上图可以看出它们分…

09 Shell Scriptfor循环结构语句

Shell Scriptfor循环结构语句 一、Shell FOR循环语句概述 ​ 属于shell的符合语句 ​ 可以看出帮助信息给出了两种语法 [rootlocalhost ~]# help for for: for NAME [in WORDS ... ] ; do COMMANDS; doneExecute commands for each member in a list.The for loop executes…

htop(1) command

文章目录 1.简介2.格式3.选项4.交互式命令5.示例6.小结参考文献 1.简介 htop 是一种交互式、跨平台的基于 ncurses 的进程查看器。 类似于 top&#xff0c;但 htop 允许您垂直和水平滚动&#xff0c;并使用指向设备(鼠标)进行交互。您可以观察系统上运行的所有进程&#xff0…

24年蓝桥杯及攻防世界赛题-MISC-2

11 Railfence fliglifcpooaae_hgggrnee_o{cr} 随波逐流编码工具 分为5栏时,解密结果为:flag{railfence_cipher_gogogo} 12 Caesar rxms{kag_tmhq_xqmdzqp_omqemd_qzodkbfuaz} mode1 #12: flag{you_have_learned_caesar_encryption} 随波逐流编码工具 13 base64 base64解…

iOS17找不到developer mode

iOS17找不到开发者模式 developer mode 下载过app之后、弹窗Developer Mode Required之后&#xff0c;这个菜单就出现了&#xff08;之前死活找不到&#xff09;。 背景&#xff1a;用蒲公英分发测试app&#xff0c;有个同事买了新机(iphone 15 pro max)&#xff0c;添加了白名…

ppt一键生成免费版软件有哪些?如何高效生成论文答辩?

答辩经验丰富的人都知道&#xff0c;制作论文答辩ppt是一项既繁琐又耗时的工作。 我们需要从数万字的论文中提炼关键点&#xff0c;梳理内容的逻辑关系&#xff0c;然后进行细致的排版和美化&#xff0c;最后还要进行反复的检查和试讲。整个过程不仅耗费时间&#xff0c;而且需…

MATLAB绘图:4.统计图表

MATLAB绘图之统计图表 一.散点图 适用情形&#xff1a;通过散点的疏密程度和变化趋势表示变量间的关系表示因变量随自变量变化的大致趋势&#xff0c;常用于显示和比较数值回归分析中&#xff0c;可用于描述数据点的分布 scatter(x,y) 在向量x和y指定的位置创建一个包含圆形…

硬件工程师笔试面试——变压器

目录 9、变压器 9.1 基础 变压器原理图 变压器实物图 9.1.1 概念 9.1.2 变压器组成结构 9.1.3 变压器原理 9.1.4 变压器的类型 9.1.5 应用领域 9.2 相关问题 9.2.1 变压器的工作原理是什么? 9.2.2 如何选择合适的变压器类型? 9.2.3 变压器在实际应用中,如何进行…

8.1差分边缘检测

基本概念 差分边缘检测是一种图像处理技术&#xff0c;用于检测图像中的边缘。边缘是指图像中灰度值发生显著变化的区域。差分边缘检测通常通过计算图像的梯度来实现&#xff0c;梯度反映了灰度值的变化率。在OpenCV中&#xff0c;可以使用不同的算子来检测不同方向的边缘&…

[docker]入门

本文章主要讲述的是&#xff0c;docker基本实现原理&#xff0c;docker概念的解释&#xff0c;docker的使用场景以及docker打包与部署的应用。 文章中docker所运行的系统&#xff1a;CentOS Linux release 7.9.2009 (Core) 目录 docker是什么&#xff0c;什么时候需要去使用 …

【Git原理与使用】版本管理与分支管理(1)

目录 一、基本操作 1、初识Git 2、Git安装[Linux-centos] 3、Git安装[ Linnx-ubuntu] 4、创建git本地仓库 5、配置Git 6、认识工作区、暂存区、版本库 7、添加文件 8、查看历史提交记录 9、查看.git文件目录结构 10、查看版本库对象的内容 11、小结&#xff08;在本地的.git仓库…

回归预测|基于饥饿游戏搜索优化随机森林的数据回归预测Matlab程序HGS-RF 多特征输入单输出 高引用先用先创新

回归预测|基于饥饿游戏搜索优化随机森林的数据回归预测Matlab程序HGS-RF 多特征输入单输出 高引用先用先创新 文章目录 一、基本原理1. 饥饿游戏搜索优化算法&#xff08;HGS&#xff09;简介2. 随机森林&#xff08;RF&#xff09;简介3. HGS-RF回归预测流程1. 初始化2. 随机森…

基于SpringBoot+Vue+MySQL的在线宠物用品商城销售系统

系统展示 用户前台界面 管理员后台界面 系统背景 随着人们生活质量的提升和宠物经济的蓬勃发展&#xff0c;宠物已成为众多家庭不可或缺的一员。宠物市场的需求日益增长&#xff0c;涵盖了食品、用品、医疗、美容等多个领域。基于SpringBootVueMySQL的在线宠物用品商城销售系统…

新发布的OpenAI o1生成式AI模型在强化学习方面迈出了重要的一步

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

【Unity杂谈】iOS 18中文字体显示问题的调查

一、问题现象 最近苹果iOS 18系统正式版推送&#xff0c;周围升级系统的同事越来越多&#xff0c;有些同事发现&#xff0c;iOS 18上很多游戏&#xff08;尤其是海外游戏&#xff09;的中文版&#xff0c;显示的字很奇怪&#xff0c;就像一些字被“吞掉了”&#xff0c;无法显示…