Vue3父子组件传参

一,父子组件传参

应用场景:父子组件传参
Vue3碎片:defineEmits,defineProps,ref,reactive,onMounted

1.父组件传子组件

a.父组件传参子组件

import { ref} from 'vue'
import OnChild from './onChild.vue'
const toGive=ref("apple");
<OnChild :getGive="toGive" />

b.子组件获取

import { onMounted} from 'vue'
const getFruit=defineProps({
      getGive:String
})
onMounted(()=>{
  console.log("子组件获得",getFruit.getGive)
})

2.子组件传父组件

a,子组件

import { reactive} from 'vue'
const playList=reactive({ name:"路人甲"})
playList.type="乒乓球🏓!";
const emit= defineEmits(['toList']);
const pass=()=>{
      playList.status="发送了一个"
      emit('toList',playList)
}

b,父组件获取

import { reactive} from 'vue'
import OnChild from './onChild.vue'
const getList= reactive({});
<OnChild  @toList="getListArr"/>
const getListArr=(value)=>{
     // getList.value=value
      getList.value = { ...Object.assign({}, value)}
      console.log("接收一个",getList.value);
}

c,父组件更新子组件传送信息

const  updateInfo=(()=>{
      toGive.value="orange";
      console.log("传给子组件一个",toGive.value);
})

3.效果图

在这里插入图片描述

简单使用,总结至此,欢迎各位工友交流学习。
传送门:
1.Vue3中provide,inject使用
2.Vue3中使用自定义指令
3.Vue3中动态组件使用
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

远程主机可能不符合glibc和libstdc++ VS Code服务器的先决条件

报错信息 VSCode无法连接远程服务器&#xff0c;终端一直提醒&#xff1a; [22:46:01.906] > Waiting for server log... [22:46:01.936] > Waiting for server log... [22:46:01.951] > [22:46:01.967] > Waiting for server log... [22:46:01.982] > [22:…

Linux--文件

文件的基本信息 文件是计算机系统中存储数据的一种单位。 它可以是文本、图像、音频、视频等信息的载体。文件通常以特定的格式和拓展名来表示其内容和类型。 在计算机系统中&#xff0c;文件使用文件名来唯一标识和访问。文件可以被创建、读取、写入、复制、移动、删除等操作…

(十三)springboot实战——springboot前后端分离方式项目集成spring securtity安全框架

前言 Spring Security 是一款强大且高度可定制的认证和访问控制框架&#xff0c;它是为了保护基于Spring的应用程序提供安全性支持。Spring Security提供了全面的安全服务&#xff0c;主要针对企业级应用程序的需求。其核心组件主要包含&#xff1a;Authentication&#xff08…

Linux的打包压缩与解压缩---tar、xz、zip、unzip

最近突然用到了许久不用的压缩解压缩命令&#xff0c;真的陌生&#xff0c; 哈哈&#xff0c;记录一下&#xff0c;后续就不用搜索了。 tar的打包 tar -cvf 压缩有的文件名称 需要压缩的文件或文件夹tar -cvf virtualbox.tar virtualbox/ tar -zcvf virtualbox.tar virtualbo…

宏景eHR fieldsettree SQL注入漏洞复现

0x01 产品简介 宏景eHR人力资源管理软件是一款人力资源管理与数字化应用相融合,满足动态化、协同化、流程化、战略化需求的软件。 0x02 漏洞概述 宏景eHR fieldsettree 接口处存在SQL注入漏洞,未经过身份认证的远程攻击者可利用此漏洞执行任意SQL指令,从而窃取数据库敏感…

备战蓝桥杯---搜索(进阶3)

看一道比较难又有趣的题&#xff1a; 下面是分析&#xff1a; 我们不妨把属性值看成点&#xff0c;一个装备可以看成一条边&#xff08;只能选一个端点&#xff09;不存在有装备属性值的当成一个点&#xff0c;于是我们便形成了树或图&#xff0c;如果是树的话&#xff0c;有一…

大模型工作方法论

这是去年探索大模型留下的一些有效工作方法论&#xff0c;给大家分享出来。看懂着&#xff0c;一点就通&#xff1b;看不懂着&#xff0c;会老追问这到底是什么呀。 &#xff08;1&#xff09; 1、成功&#xff1a;成功才是成功之母&#xff0c;失败不是成功之母。老研究失败没…

微信小程序(三十六)事件传参

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.传参步骤 2.传参接收解构步骤 源码&#xff1a; index.wxml <button type"primary" bind:tap"onclick" mark:index"{{0}}" mark:remb"{{1}}" class"But&quo…

OpenCV-31 获得形态学卷积核

OpenCV提供了获取卷积核的API&#xff0c;不需要我们手动创建卷积核。 通过下面API---getStructuringElement(shape&#xff0c;ksize&#xff0c;[, anchor]) shape是指卷积核的型状&#xff0c;注意不是指长宽&#xff0c;是指卷积核中1形成的形状。MORPH_RECT 卷积核中的1…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Video媒体组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Video媒体组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Video媒体组件 用于播放视频文件并控制其播放状态的组件。 子组件 无 接口…

我的QQ编程学习群

欢迎大家加入我的QQ编程学习群。 群号:950365002 群里面有许多的大学生大佬&#xff0c;有编程上的疑惑可以随时问&#xff0c;也可以聊一些休闲的东西。 热烈欢迎大家加入&#xff01;&#xff01; 上限:150人。

黑马Java——集合进阶(List、Set、泛型、树)

一、集合的体系结构 1、单列集合&#xff08;Collection&#xff09; 二、Collection集合 1、Collection常见方法 1.1代码实现&#xff1a; import java.util.ArrayList; import java.util.Collection;public class A01_CollectionDemo1 {public static void main(String[] a…

NAT——网络地址转换、NAPT

网络地址转换 NAT (Network Address Translation) 1994 年提出。 需要在专用网连接到互联网的路由器上安装 NAT 软件。 装有 NAT 软件的路由器叫做 NAT路由器&#xff0c;它至少有一个有效的外部全球 IP 地址。 所有使用本地地址的主机在和外界通信时&#xff0c;都要在 NA…

【大模型上下文长度扩展】线性偏差注意力 ALiBi

线性偏差注意力 ALiBi 核心问题&#xff1a;如何使Transformer模型在推理时有效处理长于训练时序列的输入&#xff0c;同时提高训练效率并减少资源需求&#xff1f;具体问题&#xff1a;当前位置编码方法不支持高效的序列长度外推。总结 论文&#xff1a;https://arxiv.org/pdf…

GeoServer 2.11.1升级解决Eclipse Jetty 的一系列安全漏洞问题

Eclipse Jetty 资源管理错误漏洞(CVE-2021-28165) Eclipse Jetty HTTP请求走私漏洞(CVE-2017-7656) Eclipse Jetty HTTP请求走私漏洞(CVE-2017-7657) Eclipse Jetty HTTP请求走私漏洞(CVE-2017-7658) Jetty 信息泄露漏洞(CVE-2017-9735) Eclipse Jetty 安全漏洞(CVE-2022-20…

ACK One Argo工作流:实现动态 Fan-out/Fan-in 任务编排

作者&#xff1a;庄宇 什么是 Fan-out Fan-in 在工作流编排过程中&#xff0c;为了加快大任务处理的效率&#xff0c;可以使用 Fan-out Fan-in 任务编排&#xff0c;将大任务分解成小任务&#xff0c;然后并行运行小任务&#xff0c;最后聚合结果。 由上图&#xff0c;可以使…

MySQL组复制的介绍

前言 本文介绍关于MySQL组复制的背景信息和基本原理。包括&#xff0c;介绍MySQL传统复制方法的原理和隐患、介绍组复制的原理&#xff0c;单主模式和多主模式等等。通过结合原理图学习这些概念&#xff0c;可以很好的帮助我们理解组复制技术这一MySQL高可用方案&#xff0c;有…

面向对象的三大特征之一封装

封装 概念 封装就是通过 权限修饰符&#xff08;private&#xff09;将成员变量隐藏起来 本质&#xff1a;就是将数据私有化&#xff0c;其他类使用必须通过设置的 get 和 set 方法来获取和设置例子&#xff1a;假设你有一本书&#xff0c;你将其藏起来&#xff0c;别人想要看…

Java基于微信小程序的医院核酸检测服务系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

CSS伸缩盒模型

CSS伸缩盒模型 伸缩盒模型是CSS中的一种布局手段&#xff0c;可以使元素具有弹性&#xff0c;让元素可以跟随页面大小的改变而改变。 1. 伸缩容器 给元素设置display:flex 或 display:inline-flex &#xff0c;就是伸缩容器。 2. 主轴与侧轴 主轴&#xff1a; 伸缩项目沿着…