当前位置: 首页 > news >正文

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.父传子&#xff08; defineProps&#xff09; 2.父传子&#xff08;useAttrs&#xff09; 3.子传父&#xff08;ref&#xff0c;defineExpose &#xff09; 4.子传父&#xff08;defineEmits&#xff09; 5.子传父&#xff08;v-model&#xff09; …...

mysql的锁(全局锁)

文章目录 mysql按照锁的粒度分类全局锁概念&#xff1a;全局锁使用场景&#xff1a;全局锁备份案例&#xff1a; mysql按照锁的粒度分类 全局锁 概念&#xff1a; 全局锁就是对整个数据库实例加锁。MySQL 提供了一个加全局读锁的方法&#xff0c;命令是: Flush tables with…...

Spring Boot 整合开源 Tess4J库 实现OCR图片文字识别

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…...

使用 Docker 和 Docker Compose 部署 Vue

使用 Docker 和 Docker Compose 部署 Vue 项目有两种方式&#xff1a;直接使用 Docker 和使用 Docker Compose。 创建 Dockerfile 在Vue.js项目根目录下创建一个 Dockerfile 的文件 # 使用最新的官方 Node.js 镜像作为基础镜像&#xff0c;并命名为 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的部署与微调

前言&#xff1a;最近大模型太火了&#xff0c;导师让我看看能不能用到自己的实验中&#xff0c;就想着先微调一个chatGLM试试水&#xff0c;微调的过程并不难&#xff0c;难的的硬件条件跟不上&#xff0c;我试了一下lora微调&#xff0c;也算跑通了吧&#xff0c;虽然最后评估…...

全球七家半导体工厂建设受阻:英特尔、三星、台积电等面临延期挑战

过去两年间&#xff0c;半导体行业经历了市场衰退、复苏慢于预期以及资金紧缩等问题&#xff0c;英特尔、台积电和三星等主要企业虽然继续推进扩张计划&#xff0c;但不断调整和放缓工厂建设的步伐与时间表&#xff0c;以更好地服务于长期发展目标。据统计&#xff0c;全球范围…...

JavaScript错误;调试;“=”,“==”,“===”的区别

try...catch语句 try..catch语句是JavaScript中用来处理异常的一种方式。它允许我们在代码块中尝试执行可能会引发错误的代码&#xff0c;并在发生错误时捕获并处理异常。 下面是try..catch语句的基本语法&#xff1a; try {// 可能会引发错误的代码 } catch (error) {// 处理…...

thinkphp6的请求

由于笔者是刚入门thinkphp&#xff0c;所以学习时对照thinkphp的官网&#xff0c;各位读者也可以对照官网学习。还麻烦各位笔者一键三连&#xff0c;谢谢。 1.请求对象 当前的请求对象由think\Request类负责&#xff0c;该类不需要单独实例化调用&#xff0c;通常使用依赖注入…...

ant design vue 表格错位,表头错位

ant design vue 表格错位,表头错位 在官网中,我们可以看到下面图片的描述: 好的,我们按照官网来一波,前面都设置了固定宽度,娃哈哈就不设置了.会出现下面效果 为啥会多了一个竖线(因为按照官网来一波x:1300,这个1300太小的原因) 3.那我们把1300改成1600,1700试试,结果也不是…...

【小白向】微信小程序解密反编译教程

# 前言 最近笔者有做到微信小程序的渗透测试&#xff0c;其中有一个环节就是对微信小程序的反编译进行源码分析&#xff0c;所谓微信小程序反编译&#xff0c;就是将访问的小程序进行反向编译拿到部分源码&#xff0c;然后对源码进行安全审计&#xff0c;分析出其中可能存在的…...

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单片机&#xff0c;连接一个无源蜂鸣器&#xff0c;播放蜂鸣器音乐&#xff0c;天空之城。 适用于所有msp430单片机。 硬件 无源蜂鸣器&#xff0c;接单片机P1.5&#xff0c;使用vcc3.3v供电。 如果根据简谱修改音乐? //第一步 //首先修改music0 的变量&…...

C语言(数据存储)

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#xff0c;在这里撰写成文一…...

Linux shell编程学习笔记56:date命令——显示或设置系统时间与日期

0 前言 2024年的网络安全检查又开始了&#xff0c;对于使用基于Linux的国产电脑&#xff0c;我们可以编写一个脚本来收集系统的有关信息。在收集的信息中&#xff0c;应该有一条是搜索信息的时间。 1. date命令 的功能、格式和选项说明 我们可以使用命令 date --help 来查看 d…...

Realsense的一些事情

Realsense的一些事情 librealsense的安装 官网教程&#xff1a; apt 安装教程&#xff1a; https://github.com/IntelRealSense/librealsense/blob/master/doc/distribution_linux.md自行clone并编译教程&#xff1a; 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.输入选择判断&#xff08;玩游戏/游戏结束/输入错误重新输入&#xff09; 二、玩游戏过程设计 1.设计棋格存放棋子——二维数组 2.初始化棋盘——初始化为空格 3.打印棋盘——本质上就是打印数组 4.游戏过程——1.玩家走棋 2.…...

ehcache3多级缓存应用

项目中如果有使用大量的本地缓存场景&#xff0c;可以使用redisehcache组合缓存&#xff0c;优先使用ehcache本地缓存&#xff0c;本地缓存没有查询到再使用redis缓存 可看前文中如何集成 本地缓存使用存在的问题 1、本地缓存如何保证缓存的是最新值 可定义版本号、自增id或者…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

验证redis数据结构

一、功能验证 1.验证redis的数据结构&#xff08;如字符串、列表、哈希、集合、有序集合等&#xff09;是否按照预期工作。 2、常见的数据结构验证方法&#xff1a; ①字符串&#xff08;string&#xff09; 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...

spring boot使用HttpServletResponse实现sse后端流式输出消息

1.以前只是看过SSE的相关文章&#xff0c;没有具体实践&#xff0c;这次接入AI大模型使用到了流式输出&#xff0c;涉及到给前端流式返回&#xff0c;所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...