vue3_组件间通信方式
目录
一、父子通信
1.父传子( defineProps)
2.父传子(useAttrs)
3.子传父(ref,defineExpose )
4.子传父(defineEmits)
5.子传父(v-model)
二、祖孙通信
1.祖传孙(provide/inject)
三、任意关系通信
1.mitt
2.vuex / pinia
3.浏览器缓存
四、路由跳转通信
1.query传参
2.params传参
3.state传参
一、父子通信
1.父传子( defineProps)
在子元素里面使用defineProps接收父元素传过来的参数。
父组件:
<template><child :data="data"></child>
</template><script setup>
import { ref } from 'vue'
import child from './child.vue'const data= ref('传个参')
</script>
子组件:
<template><div>{{ props.data}}</div>
</template><script setup>
import { defineProps } from 'vue'const props = defineProps({ //接收父组件传过来的参数data: {type: String,default: '',},
})
</script>
2.父传子(useAttrs)
父传给子参数,props参数(指 :data="参数")由defineProps接收,但非props参数(指 data="参数" 少了:)由useAttrs接收。
父组件:
<template><child :name="参数" data="666"/>
</template><script setup>
import child from './child.vue'
</script>
子组件:
<template><div>{{ props.name }} // '参数'</div>
</template><script setup>
import { defineProps, useAttrs } from 'vue'
const props = defineProps({name: {type: String}
})const myattrs = useAttrs()
console.log(myattrs) // { "data": "666" }
</script>
3.子传父(ref,defineExpose )
此方法是通过,父组件调用子组件抛出的的方法和参数来进行传参的。
子组件:
<template><div></div>
</template><script setup>import { defineExpose } from "vue"const chileMethod = () =>{console.log("我是方法")}const name = ref('参数')defineExpose({ // 对外暴露name,chileMethod})
</script>
父组件:
<template><child ref="myref"></child><button @click="myClick">点击</button>
</template><script setup>import child from "./child.vue"import { ref } from "vue"const myref = ref(null)const myClick = () => {console.log(myref.value.name) // 直接获取到子组件的属性myref.value.chileMethod() // 直接调用子组件的方法}
</script>
4.子传父(defineEmits)
在子元素里面使用defineEmits接收父元素里面的方法,并通过调用方法将参数传给父元素。
子组件:
<template><div ></div>
</template><script setup>
import { ref, defineEmits } from 'vue'const data = ref('传个参')
const emits = defineEmits(['addEvent']) //addEvent是父元素里面的一个函数方法,通过这个方法传参
const handleSubmit = () => { emits('addEvent', data.value)
}
</script>
父组件:
<template><child @addEvent="handle"></child>
</template><script setup>
import { ref } from 'vue'
import child from './child.vue'const handle = value => {console.log(value); // '传个参'
}
</script>
5.子传父(v-model)
v-model其实语法糖,如下两行代码作用是一样, 上面是下面的简写。
<chile v-model:title="title" /><chile :title="title" @update:title="title = $event" />
父组件:
<template><child v-model:name="name" v-model:num="num"></child>
</template><script setup>import child from "./child.vue"import { ref, reactive } from "vue"const name = ref("参数")const num = ref("666")
</script>
子组件:
注意:update:是固定写法。
<template><button @click="clickEvent">点击</button>
</template><script setup>import { defineEmits } from "vue"const emit = defineEmits(["name","num"])// 子组件更新参数const clickEvent = () => {emit("update:name", "孙悟空")emit("update:num", "999")}
</script>
二、祖孙通信
1.祖传孙(provide/inject)
这个祖传孙也包括了父传子。provide和inject叫依赖注入,是vue官方提供的API,它们可以实现多层组件传递数据,无论层级有多深,都可以通过这API实现。
祖组件:
<template><div></div>
</template><script setup>
import { ref, provide } from 'vue'
const name = ref('参数')// 向后代组件提供数据, 只要是后代都能接收
provide('name', name.value)
</script>
孙组件:
<template><div>{{ name }}</div>
</template><script setup>
import { inject } from 'vue'
// 接收顶层组件的通信
const name = inject('name')
</script>
三、任意关系通信
1.mitt
首先下载 npm 包
npm install --save mitt
在main.js文件进行全局挂载, $bus是自定义属性名:
import mitt from "mitt"const app = createApp(App)app.config.globalProperties.$bus = new mitt()
传参出去的组件:
<script setup>import mitt from 'mitt'const emitter = mitt()emitter.emit('自定义的事件名称','参数')
</script>
接收参数的组件:
<script setup>import mitt from 'mitt'const emitter = mitt()emitter.on('自定义的事件名称', '参数' )
</script>
2.vuex / pinia
后续会出一个专门的文章讲解这部分。
3.浏览器缓存
- sessionStorage(临时存储):为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载
- localStorage(长期存储):与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在
// 存储数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');// 获取数据
const valueFromLocalStorage = localStorage.getItem('key');
const valueFromSessionStorage = sessionStorage.getItem('key');// 删除数据
localStorage.removeItem('key');
sessionStorage.removeItem('key');// 清空所有数据
localStorage.clear();
sessionStorage.clear();
四、路由跳转通信
1.query传参
传递参数:
import router from "@/router";const query = { id: 666, name: '参数' }
router.push({ path: '/user', query })
接收参数:
import { useRoute} from 'vue-router'const route = useRoute()
console.log(route.query)
2.params传参
传递参数:
router.push({name: 'test', params: {name: '参数'}
})
接收参数:
import { useRoute} from 'vue-router'
const route = useRoute()
console.log(route.params) // { name: '参数' }
3.state传参
传递参数
<script setup>import { useRouter } from 'vue-router'
const router = useRouter();
router.push({ path: "/project",state:{data:JSON.stringify(json)}})<script>
接收参数:
<script setup>
import { ref } from "vue";
const tableData = ref([]);if (history.state.data) {tableData.value = JSON.parse(history.state.data)
}
<script>

相关文章:
vue3_组件间通信方式
目录 一、父子通信 1.父传子( defineProps) 2.父传子(useAttrs) 3.子传父(ref,defineExpose ) 4.子传父(defineEmits) 5.子传父(v-model) …...
mysql的锁(全局锁)
文章目录 mysql按照锁的粒度分类全局锁概念:全局锁使用场景:全局锁备份案例: mysql按照锁的粒度分类 全局锁 概念: 全局锁就是对整个数据库实例加锁。MySQL 提供了一个加全局读锁的方法,命令是: Flush tables with…...
Spring Boot 整合开源 Tess4J库 实现OCR图片文字识别
😄 19年之后由于某些原因断更了三年,23年重新扬帆起航,推出更多优质博文,希望大家多多支持~ 🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Mi…...
使用 Docker 和 Docker Compose 部署 Vue
使用 Docker 和 Docker Compose 部署 Vue 项目有两种方式:直接使用 Docker 和使用 Docker Compose。 创建 Dockerfile 在Vue.js项目根目录下创建一个 Dockerfile 的文件 # 使用最新的官方 Node.js 镜像作为基础镜像,并命名为 builder 阶段 FROM node:…...
力扣linkedlist
反转链表、 public class reverseList { // 1->2->3->o 、 o<-1<-2<-3public ListNode reverseList(ListNode head){//反转链表ListNode prevnull;ListNode currhead;while(curr!null){ListNode nextcurr.next;curr.nextprev;prevcurr;currnext;}retu…...
springboot 启动原理、启动过程、启动机制的介绍
Spring Boot 是一种基于 Java 的框架,用于创建独立的、生产级别的 Spring 应用程序。它的主要目标是简化 Spring 应用的初始搭建和开发过程,同时提供一系列大型项目常见的非功能性特征(如嵌入式服务器、安全性、度量、健康检查和外部化配置)。以下是 Spring Boot 的一些核心…...
大模型ChatGLM的部署与微调
前言:最近大模型太火了,导师让我看看能不能用到自己的实验中,就想着先微调一个chatGLM试试水,微调的过程并不难,难的的硬件条件跟不上,我试了一下lora微调,也算跑通了吧,虽然最后评估…...
全球七家半导体工厂建设受阻:英特尔、三星、台积电等面临延期挑战
过去两年间,半导体行业经历了市场衰退、复苏慢于预期以及资金紧缩等问题,英特尔、台积电和三星等主要企业虽然继续推进扩张计划,但不断调整和放缓工厂建设的步伐与时间表,以更好地服务于长期发展目标。据统计,全球范围…...
JavaScript错误;调试;“=”,“==”,“===”的区别
try...catch语句 try..catch语句是JavaScript中用来处理异常的一种方式。它允许我们在代码块中尝试执行可能会引发错误的代码,并在发生错误时捕获并处理异常。 下面是try..catch语句的基本语法: try {// 可能会引发错误的代码 } catch (error) {// 处理…...
thinkphp6的请求
由于笔者是刚入门thinkphp,所以学习时对照thinkphp的官网,各位读者也可以对照官网学习。还麻烦各位笔者一键三连,谢谢。 1.请求对象 当前的请求对象由think\Request类负责,该类不需要单独实例化调用,通常使用依赖注入…...
ant design vue 表格错位,表头错位
ant design vue 表格错位,表头错位 在官网中,我们可以看到下面图片的描述: 好的,我们按照官网来一波,前面都设置了固定宽度,娃哈哈就不设置了.会出现下面效果 为啥会多了一个竖线(因为按照官网来一波x:1300,这个1300太小的原因) 3.那我们把1300改成1600,1700试试,结果也不是…...
【小白向】微信小程序解密反编译教程
# 前言 最近笔者有做到微信小程序的渗透测试,其中有一个环节就是对微信小程序的反编译进行源码分析,所谓微信小程序反编译,就是将访问的小程序进行反向编译拿到部分源码,然后对源码进行安全审计,分析出其中可能存在的…...
Flutter基础 -- Dart 语言 -- 类抽象接口继承函数库
目录 1. 类 class 1.1 定义、使用类 1.2 构造函数 1.3 初始化列表 1.4 命名构造函数 1.5 重定向构造函数 1.6 callable 2. 类 get set 2.1 定义、使用 get set 2.2 简化 get set 2.3 业务场景 3. 静态 static 3.1 static 定义 3.2 函数内部访问 3.3 静态方法 3…...
【TB作品】msp430单片机,播放蜂鸣器音乐,天空之城
功能 msp430单片机,连接一个无源蜂鸣器,播放蜂鸣器音乐,天空之城。 适用于所有msp430单片机。 硬件 无源蜂鸣器,接单片机P1.5,使用vcc3.3v供电。 如果根据简谱修改音乐? //第一步 //首先修改music0 的变量&…...
C语言(数据存储)
Hi~!这里是奋斗的小羊,很荣幸各位能阅读我的文章,诚请评论指点,欢迎欢迎~~ 💥个人主页:小羊在奋斗 💥所属专栏:C语言 本系列文章为个人学习笔记,在这里撰写成文一…...
Linux shell编程学习笔记56:date命令——显示或设置系统时间与日期
0 前言 2024年的网络安全检查又开始了,对于使用基于Linux的国产电脑,我们可以编写一个脚本来收集系统的有关信息。在收集的信息中,应该有一条是搜索信息的时间。 1. date命令 的功能、格式和选项说明 我们可以使用命令 date --help 来查看 d…...
Realsense的一些事情
Realsense的一些事情 librealsense的安装 官网教程: apt 安装教程: https://github.com/IntelRealSense/librealsense/blob/master/doc/distribution_linux.md自行clone并编译教程: https://github.com/IntelRealSense/librealsense/blo…...
CISCN 2023 初赛 被加密的生产流量
题目附件给了 modbus.pcap 存在多个协议 但是这道题多半是 考 modbus 会发现 每次的 Query 末尾的两个字符 存在规律 猜测是base家族 可以尝试提取流量中的数据 其中Word Count字段中的22871 是10进制转16进制在转ascii字符串 先提取 过滤器判断字段 tshark -r modbus.pcap …...
初识C语言第三十天——设计三子棋游戏
目录 一.设计游戏框架 1.打印游戏菜单 2.输入选择判断(玩游戏/游戏结束/输入错误重新输入) 二、玩游戏过程设计 1.设计棋格存放棋子——二维数组 2.初始化棋盘——初始化为空格 3.打印棋盘——本质上就是打印数组 4.游戏过程——1.玩家走棋 2.…...
ehcache3多级缓存应用
项目中如果有使用大量的本地缓存场景,可以使用redisehcache组合缓存,优先使用ehcache本地缓存,本地缓存没有查询到再使用redis缓存 可看前文中如何集成 本地缓存使用存在的问题 1、本地缓存如何保证缓存的是最新值 可定义版本号、自增id或者…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程? 2. Java创建对象的过程? 3. 对象的生命周期? 4. 类加载器有哪些? 5. 双亲委派模型的作用(好处)? 6. 讲一下类的加载和双亲委派原则? 7. 双亲委派模…...
FFmpeg:Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...
