vuejs文件传参方式

news2024/10/2 3:30:40

vue2版本
vscode
大致总结一下几种情况:

1.父传子,父组件利用props向子组件传递数据

1.在父组件的子组件标签上绑定一个属性,挂载要传输的变量
2.在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接用props:[属性名]或者props{属性名:数据类型}

代码示例:
在这里插入图片描述

2.子传父,子组件利用$emit()向父组件传递数据

1.在父组件的子组件标签上定义一个事件,然后调用需要的方法
2.在子组件的方法中通过this.$emit(‘事件’) 来触发在父组件中定义的 事件。数据是以参数的方式进行传递的

代码示例:
在这里插入图片描述

3.兄弟级,包括.vue 与.vue文件之间, .vue与 .js文件之间都可以通过公共文件传递数据

1.在src中创建新的文件为bus.js,然后导出一个空的vue实例
2.在传输数据的一方引入bus.js然后通过bus. e m i t ( ′ 事件 名 ′ , ′ 参 数 ′ ) 来派发事件,数据是以 e m i t ()的参数形式拉埃传递 3. 在接受数据的一方,引入 b u s 。 j s 然后用过 b u s . emit('事件名','参数')来派发事件,数据是以emit()的参数形式拉埃传递 3.在接受数据的一方,引入bus。js然后用过bus. emit(事件)来派发事件,数据是以emit()的参数形式拉埃传递3.在接受数据的一方,引入busjs然后用过bus.on(‘事件名’,(data)=>{data是接受的数据})

代码示例:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.父子组件之间利用‘ref/refs’传递数据

  1. ref如果在普通的DOM元素上使用,引用指向的就是DOM元素,如果用在子组件上,引用就指向的组件实例,
  2. 可以ton过实例直接调用组件的方法或者数据,也算是子组件向父组件传值的一种

代码示例:
在这里插入图片描述

在这里插入图片描述

5.使用 Vuex传递数据

组件通过 dispatch 到 actions,actions是异步操作,再 actions中通过 commit 到 mutations, mutations 再通过逻辑操作改变state ,从而同步到组件,更新数据状态

代码示例:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. $parent

通过parent可以获取父组件实例,然后通过这个实例就可以访问父组件的属性和方法。类似于ref子组件给父组件传承,实际就是在父组件拿到子组件的实例,就可以拿到对应的身上的方法及属性,他有一个兄弟 root,可以获取到根组件的实例,类似。。

代码示例:

在这里插入图片描述

7. storage传值

如果使用场景允许,可以利用浏览器的sessionStorage,localStorage.,传递参数,原理类似于bus总线,与vuex,都是利用同一个存储空间,

代码示例:

在这里插入图片描述

注意: 里面存的是键值对,只能是字符串类型,如果要存对象的话,需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储(使用的时候 let obj = JSON.parse(objStr)
解析为对象)。

推荐一个库 good-storage ,它封装了sessionStorage ,可以直接用它的API存对象
在这里插入图片描述

8. 路由传值

使用问号传值
A页面跳转B页面时使用this.router.push('/B?name=danseek') B 页 面 可 以 使 用 this.router.push('/B?name=danseek')B页面可以使用this.route.query.name 来获取A页面传过来的值
上面要注意router和route的区别

使用冒号传值
在这里插入图片描述
在B页面可以通过 this.$route.params.name 来获取路由传入的name的值

使用父子组件传值
由于router-view本身也是一个组件,所以我们也可以使用父子组件传值方式传值,然后在对应的子页面里加上props,因为type更新后没有刷新路由,所以不能直接在子页面的mounted钩子里直接获取最新type的值,而要使用watch
在这里插入图片描述

9. 全局变量

定义一个全局变量,在有值的组件直接赋值,在需要的组件内直接使用就可以了,。。。(稍后补)

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

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

相关文章

RayVentory updated

RayVentory updated RayVentory Aspera连接器12.5.0.11850[更新1] 增加了对Docker容器的支持。 已将Xen虚拟机的设备类型更改为“Virtual_Machine”。 RayVentory扫描引擎12.5.3579.69[更新1] 添加了法语UI翻译预览。 RayVentory提供了硬件和软件的全面清单,并提供了…

mars3d获取视窗的范围

期望效果 :1.我现在想获取到当前视窗的地图范围,请问有什么⽅法可以拿到吗 2.⽐如当前视窗地图范围的边界点,每个边界点的经纬度 回复:1.mars3d的API⽂档中有相关的⽅法 2.具体使⽤可以参考⽂档地址:http://mars3d.cn/api/Map.htm…

长期跑步需要买个运动耳机吗、最好用的5款跑步耳机推荐

告别了寒冬,迎来了暖春。我的健身计划也开始提上了日程。最开始跑步还有点新鲜感,但是时间一久,自己在公园跑步那种枯燥感就会袭来,一个坚持跑步一年多的朋友告诉我,可以试一下跑步时听听音乐,既能锻炼身体…

JVM虚拟机栈

1、概述Java虚拟机栈(Java Virtual Machine Stack),早期也叫Java栈。每个线程在创建时都会创建一个虚拟机栈,其内部保存一个个的栈帧(Stack Frame),对应着一次次的Java方法调用,是线…

Codeforces Round #850 (Div. 2, based on VK Cup 2022 - Final Round)(A~E)

t宝酱紫喜欢出这种分类讨论的题&#xff1f;&#xff01;A1. Non-alternating Deck (easy version)给出n张牌&#xff0c;按照题目给的顺序分给两人&#xff0c;问最后两人手中各有几张牌。思路&#xff1a;模拟。AC Code&#xff1a;#include <bits/stdc.h>typedef long…

SpringBoot+Vue前后端分离管理系统03:后端

后端项目初始化 1、创建一个springboot 2.7.8项目 2、导入依赖 <!-- web --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- mysql -->…

MIND——Modality independent neighbourhood descriptor 模态无关邻域描述符

参考&#xff1a;https://blog.mbedded.ninja/programming/signal-processing/image-processing/image-registration/modality-independent-neighbourhood-descriptor-mind/《MIND: Modality independent neighbourhood descriptor for multi-modal deformable registration》论…

【离线数仓-6-数据仓库开发ODS层设计要点】

离线数仓-6-数据仓库开发ODS层设计要点离线数仓-6-数据仓库开发ODS层1.数据仓库开发ODS层设计要点2.ODS层用户行为日志表1.hive中复杂结构体复习1.array2.map3.struct 复杂结构4.嵌套格式2.hive中针对复杂结构字符串的练习1.针对ods层为json格式数据的练习2.用户行为日志表的设…

Linux学习(5)nano与正确关机方法sync shutdown

目录 文书编辑器 nano 正确的关机方法: sync, shutdown, reboot, halt, poweroff, init 数据同步写入磁盘&#xff1a;sync 惯用的关机命令&#xff1a; shutdown 重新启动&#xff0c;关机&#xff1a; reboot, halt, poweroff 切换运行等级&#xff1a; init 以下内容转载…

linux编程之经典多级时间轮定时器(C语言版)

一. 多级时间轮实现框架 上图是5个时间轮级联的效果图。中间的大轮是工作轮&#xff0c;只有在它上的任务才会被执行&#xff1b;其他轮上的任务时间到后迁移到下一级轮上&#xff0c;他们最终都会迁移到工作轮上而被调度执行。 多级时间轮的原理也容易理解&#xff1a;就拿时…

技术分享| anyRTC回声消除算法进化

本文将从基础概念、经典算法、主要挑战&#xff0c;以及人工智能回声消除技术探索等方面&#xff0c;分享anyRTC在 AEC 技术方面的实践及效果。 一.什么是回声消除 回音消除一直是语音通信的难点&#xff0c;最早的回声消除是从电话兴起的时候就有了&#xff0c;电话机的硬件…

postgres 源码解析51 LWLock轻量锁--2

本篇将着重讲解LWLock涉及的主要API工作流程与实现原理&#xff0c;相关基础知识见回顾&#xff1a;postgres 源码解析50 LWLock轻量锁–1 API介绍 函数API功能CreateLWLocks分配LWLocks所需的内存并进行初始化LWLockNewTrancheId分配新的Tranche ID,供用户使用Extension模块…

Helm安装Harbor

一、介绍 1.1 Harbor Harbor 是由 VMware 公司为企业用户设计的 Registry Server 开源项目&#xff0c;包括了权限管理 (RBAC)、LDAP、审计、管理界面、自我注册、HA 等企业必需的功能&#xff0c;同时针对中国用户的特点&#xff0c;设计镜像复制和中文支持等功能。目前该项…

说说Java“锁“ 事

文章目录前言大厂面试题复盘 —— 并发编程高级面试解析从轻松的乐观锁和悲观锁开讲通过8种情况演示锁运行案例&#xff0c;看看我们到底锁的是什么公平锁和非公平锁可重入锁(又名递归锁)死锁及排查写锁(独占锁)/读锁(共享锁)自旋锁SpinLock无锁 -> 独占锁 -> 读写锁 -&g…

五种IO模型以及select多路转接IO模型

目录 一、典型IO模型 1.1 阻塞IO 1.2 非阻塞IO 1.3 信号驱动I0 1.4 IO多路转接 1.5 异步IO 多路转接的作用和意义 二、多路转接IO模型&#xff08;select&#xff09; 2.1 接口 2.2 接口当中的事件集合&#xff1a; fd_set 2.2 select使用事件集合&#xff08;位图&am…

ip公司和soc公司是什么?

IP 公司和 SoC 公司都是半导体行业的重要组成部分&#xff0c;但它们的角色和职责略有不同。IP&#xff08;Intellectual Property&#xff09;公司主要提供可重用的知识产权组件&#xff0c;也称为 IP 核或 IP 模块&#xff0c;这些组件可以在设计芯片的过程中被集成到芯片中。…

Git代码冲突-不同分支之间的代码冲突

1、解决思路在团队开发中&#xff0c;提交代码到Git仓库时经常会遇到代码冲突的问题。- 原因&#xff1a;多人对相同的文件进行了编辑&#xff0c;造成代码存在差异化- 解决方案&#xff1a;1. 使用工具或git命令对比不同分支代码的差异化2. 把不同分支中有效代码进行保留&…

[译文] 基于PostGIS3.1 生成格网数据

根据格网进行数据统计与分析是一种常用的方法&#xff0c;相比自然地理边界与行政管理边界而言&#xff0c;使用格网有如下特点&#xff1a;每个格网之间地位相等&#xff0c;没有上下级之分。每个格网的面积都相等。相邻两个格网单元中心点之间距离相等。适用于将数据从“空间…

ThreeJS加载公路GeoJson数据实现流光效果

threejs加载公路geojson数据,跟加载行政区域的原理一样,唯一不同的是geojson格式不一样,路线并不是连贯起来的,按照路段进行的拆分,在加载的时候问题不大,正常解析然后转墨卡托投影,但是在做流光效果时,需要对geojson进行重新组合. 实现效果:

Android:反编译apk踩坑/apktool/dex2jar/JDGUI

需求描述 想要反编译apk文件&#xff0c;搜到了这篇博客&#xff1a;Android APK反编译就这么简单 详解&#xff08;附图&#xff09;&#xff0c;非常有参考价值~但其中的工具下载链接都已404&#xff0c;而本杂鱼实际操作的过程中也出现了亿点点点点点点的问题&#xff0c;于…