vue3-api之provide与inject

传值: 父组件 => 子组件 => 孙组件

// 父组件
<template><div class="app"><h3>我是app组件(祖) --- {{ name }} {{ price }}</h3><child /></div>
</template><script>
import { reactive, toRefs, provide } from "vue";
import child from "./components/child.vue";export default {name: "App",components: { child },setup() {let car = reactive({ name: "奔驰", price: "40W" });// 给自己的后代组件传递数据,只要在这里执行了provide,后代子组件都可以通过inject获取数据// 父传子props    父传孙provideprovide("car", car);return {...toRefs(car),};},
};
</script><style>
.app {background-color: #ccc;padding: 10px;
}
</style>
<template><div class="child"><h3>我是child组件(子) {{ msg }}{{ school }}</h3><son/></div>
</template><script>
// import { ref } from "vue";
import son from './son.vue'
export default {name: "child",components: { son },props: ["msg", "school","afanfan"],setup() {return {};},
};
</script><style>.child {background-color: skyblue;padding: 10px;}
</style>
// 孙组件
<template><div class="son"><h3>我是son组件(孙)--- {{ car.name }}--- {{ car.price }}</h3></div>
</template><script>
import { inject } from "vue";
export default {name: "son",setup() {let car = inject("car")return {car,};},
};
</script><style>
.son {background-color: orange;padding: 10px;
}
</style>

更多的组件传值传事件请参考:

vue3传值传事件参考

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

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

相关文章

【LaTex】11 ACM参考文献顺序引用 - 解决 ACM-Reference-Format 顺序不符合论文实际引用顺序的问题

【LaTex】11 ACM参考文献顺序引用 写在最前面解决 ACM-Reference-Format 顺序不符合论文实际引用顺序的问题问题描述问题原因如何解决问题解决方案1&#xff08;更简单&#xff09;解决方案2&#xff08;更自由&#xff09; 小结 &#x1f308;你好呀&#xff01;我是 是Yu欸 …

浙江大学数据结构MOOC-课后习题-第六讲-图2 Saving James Bond - Easy Version

题目汇总 浙江大学数据结构MOOC-课后习题-拼题A-代码分享-2024 题目描述 测试点 思路分享 ①解题思路概览 我的想法是&#xff0c;先建立一个图&#xff0c;然后再利用DFS或者BFS来遍历判断当前顶点能否跳到岸上去 ②怎么建图&#xff1f; 首先要考虑采用什么数据结构来存储图…

uni微信小程序input框过滤中文字节以及规定以外的符号

问题描述 需求是输入账号只能为手机号、邮箱、字母和数字组成的字符串&#xff0c;那么就是所有大小写字母、数字、以及符号 - _ . 四种。 条件限制 微信小程序无法直接通过type属性实现&#xff0c;type属性中没有专门为只允许英文字母的输入类型。详情见input | uni-ap…

AI推介-多模态视觉语言模型VLMs论文速览(arXiv方向):2024.04.15-2024.04.25

文章目录~ 1.AutoGluon-Multimodal (AutoMM): Supercharging Multimodal AutoML with Foundation Models2.Fusion of Domain-Adapted Vision and Language Models for Medical Visual Question Answering3.CatLIP: CLIP-level Visual Recognition Accuracy with 2.7x Faster Pr…

LVM与磁盘配额09

一、LVM 1、lvm概述 lvm &#xff08;logical volume manager &#xff09;&#xff1a;逻辑卷管理 linux系统下对硬盘分区的一种管理机制。 场景&#xff1a;lvm机制特别适合于管理大存储设备。 作用&#xff1a;可以动态的对硬盘进行扩容 。 逻辑上的磁盘&#xff0c;概…

爬虫技术中的滑块验证问题及解决方案

一、引言 随着大数据时代的到来&#xff0c;网络爬虫技术已成为数据获取和分析的重要工具。然而&#xff0c;随着网络安全性的提高&#xff0c;越来越多的网站开始采用滑块验证技术来防止机器人程序的自动化访问。对于爬虫开发者来说&#xff0c;如何绕过或处理滑块验证成为了…

uni-app加载本地图片报500(Internal Server Error)异常解决办法

在网上看到关于加载本地图片500错误是因为分包后无法加载分包中的图片&#xff0c;需要在manifest.json中在对应平台的配置下添加"optimization" :{ “subPackages” : true } 这个方法对我遇到的这种错误无效&#xff0c;于是我仔细看了一下所报的异常 上面说在pac…

教你网站如何免费实现https

想要实现https访问最简单有效的的方法就是安装SSL证书。只要证书正常安装上以后&#xff0c;浏览器就不会出现网站不安全提示或者访问被拦截的情况。下面我来教大家怎么去获取免费的SSL证书&#xff0c;又如何安装证书实现https访问。 一、选择免费SSL证书提供商 有多家机构提…

灵狐剪辑软件,视频AI剪辑+去水印裁剪+视频 分割+批量合成+智能混剪(教程+软件)

1.介绍&#xff1a; 【灵狐剪辑】是一款视频编辑工具&#xff0c;能够帮助用户轻松地制作出专业级别的视频作品。这款软件拥有丰富的视频编辑功能&#xff0c;包括剪辑、合并、添加特效、调整音频等&#xff0c;让用户能够充分发挥创意&#xff0c;打造出独具特色的视频内容。…

OSINT技术情报精选·2024年5月第3周

OSINT技术情报精选2024年5月第3周 2024.5.27版权声明&#xff1a;本文为博主chszs的原创文章&#xff0c;未经博主允许不得转载。 1、爱分析&#xff1a;《小步快跑,数据库持续敏捷迭代&#xff1a;数据库应用实践报告》 在国家政策的推动、技术创新以及业务需求的共同驱动下…

Hugging face win使用教程(二)

1. 将环境迁移到win&#xff0c;可以直接下载修改好的cuda环境https://download.csdn.net/download/liangjiubujiu/89368302?spm1001.2014.3001.5503 2. 修改hugging face的缓存路径 3. 重启pycharm 4. 编写测试代码&#xff0c;注意可能由于网络链接问题&#xff0c;需要关…

finetuning大模型准备(基于Mac环境)

为finetuning进行的热身准备&#xff0c;涉及周边的软件工具&#xff0c;方法。 问题1&#xff1a;finetuning过程较长&#xff0c;采用系统自带命令行没有后台&#xff0c;前台被杀后&#xff0c;容易造成训练失败。 解决方法&#xff1a; tmux可以开启后台训练 问题2&…

Sql语法3

数据库语言大概可以分为四大类 1、DML&#xff1a;&#xff08;Database Manipulation Language&#xff09;:insert,update,delete 2、DQL&#xff1a;&#xff08;Database Query Language&#xff09;:select 3、DCL&#xff1a;&#xff08;Database Control Langu…

无状态程序设计的本质

无状态程序设计 无状态程序设计是一种软件设计理念&#xff0c;它主要强调的是请求处理的独立性和无记忆性。以下是对无状态程序设计的详细解释&#xff1a; 无状态的含义&#xff1a; 无状态并不意味着系统内没有数据&#xff0c;而是指服务器在处理单次请求时&#xff0c;不…

前端面试问题:子组件的某一个方法调用执行逻辑由父组件的属性状态变化来决定

面试官&#xff1a;请你讲讲你在该项目中遇到的问题是什么&#xff1f;你怎么解决这个问题&#xff1f; 答&#xff1a;我的回答&#xff1a;该项目的实现过程中我确实遇到了问题&#xff1a;【我会给大家整理回答思路和角度&#xff0c;那那么遇到这样的问题也可借鉴这种思路…

【Go专家编程——内存管理——逃逸分析】

逃逸分析 逃逸分析&#xff08;Escape Analysis&#xff09;是指由编译器决定内存分配的位置&#xff0c;不需要程序员决定。 在函数中申请一个新的对象 如果分配在栈上&#xff0c;则函数执行结束后可自动将内存回收如果分配在堆上&#xff0c;则函数执行结束后可交给GC&…

stoi家族函数详解

atoi家族函数详解 1.atoi函数1.1函数原型1.2函数使用1.3函数使用的注意事项1.4atoi函数的模拟实现 2.其它函数 atoi函数家族中包含atof、atol、_atoi64 他们的作用为将字符串转换成double&#xff08;atof&#xff09;、integer&#xff08;atoi、_atoi64&#xff09;、long&am…

kafka连接zookeeper失败导致无法启动

1.背景 Linux服务器磁盘使用率100%导致kafka服务挂掉&#xff0c;推测是别的生产者往kafka服务器不停的塞数据把服务器塞爆了&#xff0c;服务器总空间60g&#xff0c;然后进到服务器查看kafka默认数据存储路径/tmp/kafka_logs就占了37g特别是目标topic&#xff0c;由于这个ka…

vscode+docker搭建迷你开发环境。制作docker镜像,并通过vscode连接后进行开发

制作自己的docker镜像&#xff0c;将docker镜像作为服务器&#xff0c;接受vscode连接 目录 1. 制作开发环境镜像 1.1 选择基础镜像 1.2 编写dockerfile 1.3 构建镜像 2. 启动镜像 3. 添加用户 3.1 查看物理机上用户信息 3.2 登录到docker中 3.3 按照物理机的用户和组…

YOLO训练报错解决:OSError: [WinError 1455] 页面文件太小,无法完成操作

问题&#xff1a;OSError: [WinError 1455] 页面文件太小&#xff0c;无法完成操作。 Error loading "C:\Users\12706.conda\envs\yolov8\lib\site-packages\torch\lib\cudnn_cnn_infer64_8.dll" or one of its dependencies. 解决方法&#xff1a; 降低数据加载的线…