Vue3-provide 和 inject 跨组件传递数据

news2024/11/14 15:25:40

Vue3-provide 和 inject 跨组件传递数据

  • 功能:将数据从App组件跨过一个组件传递到B组件中
  • provide:提供数据
  • inject:接收数据

在这里插入图片描述

// App.vue
<template>
    <h2>我是App组件({{num}}</h2>
    <A></A>
</template>

<script setup>
    import A from './components/A.vue'
    import { provide, ref } from 'vue'
    let num = ref(1)
    provide('app', num)
</script>
// A.vue
<template>
    <h2>我是A组件</h2>
    <B></B>
</template>

<script setup>
    import B from './B.vue'
</script>
// B.vue
<template>
    <h2>我是B组件({{num}}</h2>
</template>

<script setup>
    import { inject } from "vue";
    let num = inject('app')
</script>

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

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

相关文章

UASRT(2)

UASRT参数配置 数据发送过程 1.双缓冲 当要发送三个数据 且是连续发送 第一个数据写入TDR寄存器 然后到移位寄存器发送&#xff08;一个一个bit的发送&#xff09;在第一个数据在移位寄存器发送的时候第二个数据就已经被写入TDR寄存器了等到第一个数据发送完第二个数据就进入…

2023年中国农业机器人行业市场规模及发展趋势分析[图]

农业机器人是一种机器&#xff0c;是机器人在农业生产中的运用&#xff0c;是一种可由不同程序软件控制&#xff0c;以适应各种作业,能感觉并适应作物种类或环境变化&#xff0c;有检测(如视觉等)和演算等人工智能的新一代无人自动操作机械。 农业机器人分类 资料来源&#xf…

基于单片机PM2.5监测系统仿真设计

**单片机设计介绍&#xff0c; 基于单片机PM2.5监测系统仿真设计 文章目录 一 概要简介设计目标系统组成工作流程仿真设计结论 二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 # 基于单片机PM2.5监测系统仿真设计介绍 简介 PM2.5&#xff08;可吸…

3.8-镜像的发布

如果我们想将image push到docker hub里面&#xff0c;那么我们的image的名字一定要是这种格式&#xff1a;docker hub id/imageName&#xff0c;例如&#xff1a;lvdapiaoliang/hello-docker docker hub个人账户设置地址&#xff1a; 在push之前要先登录&#xff1a; docker l…

图神经网络:消息传递算法

一、说明 图网络-GNN&#xff08;Graph Neural Networks&#xff09;是近几年研究的主题之一&#xff0c;虽不及深度神经网络那么火爆&#xff0c;但在一些领域&#xff0c;如分子化学方面是不得不依赖的理论。本文就一些典型意义的图神经网络消息传递展开阐述。 二、图网络简述…

传输层协议 - UDP(User Datagrm Protocol)

文章目录&#xff1a; 传输层再谈端口号端口号划分知名端口号&#xff08;Well-Know Port Number&#xff09;netstat 命令iostat 命令pidof UDP 协议UDP 协议格式UDP 协议的特点面向数据报UDP 的缓冲区UDP 使用注意事项UDP 协议的应用基于 UDP 的应用层协议 在 DDoS 攻击中如何…

bhosts 显示节点 “unreach“ 状态

4.1、bhosts简单使用 查看各节点情况&#xff0c;包括状态和正在运行的 Job 情况等 STATUS列展示节点状态 OK&#xff1a;可用——可接受新的作业的正常状态 unavail&#xff1a;不可用 可能原因&#xff1a;主机关闭&#xff0c;LIM和sbatchd不可达 unreach&#xff1a;无法连…

关于LED显示屏的扫描方式知识

LED显示屏的扫描方式是指LED显示屏如何以一定的顺序控制LED点阵的亮度&#xff0c;从而形成图像或文字。主要有静态扫描和动态扫描两种方式。 静态扫描&#xff08;Static Scan&#xff09;&#xff1a; 描述&#xff1a; 在静态扫描中&#xff0c;LED显示屏的每个LED点都有一个…

【Java SE】 详解java访问限定符

访问限定符 Java中主要通过类和访问权限来实现封装&#xff1a;类可以将数据以及封装数据的方法结合在一起&#xff0c;更符合人类对事物的认知&#xff0c;而访问权限用来控制方法或者字段能否直接在类外使用。Java中提供了四种访问限定符&#xff1a; 实际只有三种访问限定…

Find My蓝牙耳机|苹果Find My技术与耳机结合,智能防丢,全球定位

蓝牙耳机就是将蓝牙技术应用在免持耳机上&#xff0c;让使用者可以免除恼人电线的牵绊&#xff0c;自在地以各种方式轻松通话。自从蓝牙耳机问世以来&#xff0c;一直是行动商务族提升效率的好工具。正是应为蓝牙耳机小巧无线&#xff0c;人们越来越喜欢随身携带蓝牙耳机出门&a…

Iris for Mac:简单易用的录屏神器,让你的演示更出色

你是否曾需要在Mac上进行屏幕录制&#xff0c;但却苦于找不到一款简单易用的工具&#xff1f;那么&#xff0c;今天我们将为你介绍一款全新的屏幕录制软件——Iris for Mac。这款软件不仅功能强大&#xff0c;而且操作简单&#xff0c;可以轻松满足你的各种录屏需求。 一、简单…

系列五、线程间通信

一、synchronized实现 1.1、案例一&#xff08;2个线程交替对变量执行1、-1操作&#xff0c;来10轮&#xff09; 1.1.1、资源类ShareDataOne /*** Author : 一叶浮萍归大海* Date: 2023/11/20 10:44* Description: 资源类* 说明&#xff1a;2个线程使用if判断变量的值&#…

Python中用requests时遇到的错误警告解决方案

最近&#xff0c;我在Python 2.7.6&#xff08;Ubuntu 14.04.2 LTS&#xff09;环境中将requests库的版本从2.5.3升级到2.6.0&#xff0c;却遇到了’A true SSLContext object is not available’警告。每当我在Python 2.7.6环境中尝试使用requests库访问’github’时&#xff…

论文笔记:The Impact of AI on Developer Productivity:Evidence from GitHub Copilot

0 abstract 本文介绍了一项对GitHub Copilot&#xff08;一种人工智能编程助手&#xff09;的控制实验结果。研究人员招募了软件开发人员&#xff0c;要求他们尽可能快地用JavaScript实现一个HTTP服务器。实验组可以访问人工智能编程助手&#xff0c;比对照组完成任务的速度快…

Python 进程和线程详解(multiprocessing、threading)

文章目录 1 概述1.1 进程 VS 线程1.2 优缺点 2 进程2.1 三个步骤2.2 多进程2.3 带参数2.3.1 元组参数 args2.3.2 字典参数 kwargs 2.4 获取进程编号2.5 设置进程守护 3 线程3.1 三个步骤3.2 多线程3.3 带参数2.3.1 元组参数 args2.3.2 字典参数 kwargs 2.4 获取线程编号2.5 设置…

python爬取快手视频

原理 F12点击graphql能够看到里面有若干视频信息,一会儿要取其中的url地址 右键复制cURL 然后进入到这个转换器连接 https://curlconverter.com/python/ 点击这个连接复制上述信息,然后就能解析处下面的代码,拷贝到你的项目中替换cookies,headers,json_data 源代码 …

大模型重塑软件设计,南京真我加入飞桨技术伙伴,大模型生态圈成员又添一员!

为帮助伙伴更快、更好的应用大模型技术&#xff0c;飞桨技术伙伴体系及权益基于星河共创计划全面升级&#xff0c;通过丰富的场景、技术、算力、品牌等资源&#xff0c;为伙伴企业提供一站式的大模型资源对接&#xff0c;全面降低创建AI原生应用的门槛。 近日&#xff0c;南京…

QQ自动批量加好友(手机端)

1.需求 按照格式输入批量qq号,输入加好友间隔时间,脚本自动打开qq应用开始自动加好友,全程自动化操作。 输入qq号格式: 运行示意图: 2.代码 function carmiLogin () {var carmi = getCarMi()try {const data = {"key": carmi}http.__okhttp__.setTimeout(3000…

「Verilog学习笔记」边沿检测

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1ns module edge_detect(input clk,input rst_n,input a,output reg rise,output reg down );reg a_tem ; always (posedge clk or negedge rst_n) beginif…