vue页面之间数据的传递
vue是由一个个组件组合而成的页面,今天我们就来说一下页面之间数据的传递.
我们经常会在后台管理系统看到用户详情,有添加用户和编辑用户.有时候我们的添加和编辑是在同一页面上以模态框的形式展现的,但有的时候则是以另一兄弟页面的形式展示的,这个时候就需要从主页面向兄弟页面进行传值.在vue中是怎么做到的呢?今天我们用举例子的方式介绍一下.
在我们现在做的后台管理系统中,有组织机构的页面.
我们想要的效果是点击树节点获取到组织详情和组织下的人员详情,但这里我们不做过多的介绍,就是一般的后台请求接口的方式,现在我们可以看到上面有两个按钮,分别是添加和编辑.
我们现在说一下编辑 我们先点击树节点获取到相应的组织结构
然后如果我们想要编辑组织详情的话,点击编辑(因为内容多)我们想要跳转到另一个页面
因为路径不同,数据该怎样从详情页面传递到编辑页面的呢?
我们点击编辑按钮的时候跳转到我们编辑的路径,同样需要传递给我们编辑页面的有我们向后台获取组织详情时候的id,然后我们在编辑页面需要接收这个id然后在初始化的时候向后台传递这个id,获取相应的详情即可.
正常的情况下我们接收到需要的id即可.让我们编辑的内容和从后台获取的内容相互绑定即可.这个时候编辑页面的数据就是和详情页面的是一样的.
vue页面之间数据的传递的更多相关文章
- vue组件之间数据的传递
父子组件通信 父组件向子组件传递数据: 1.通过子组件的 props 选项声明它期待获得的数据,用以接收父组件传过来的值. 2.在子组件标签中使用子组件props中创建的属性 3.父组件中注册子组件 ...
- intent,实现两个活动之间数据的传递
一.Intent 可以启动一个活动,也可以在启动活动的时候传递数据.intent中提供了putExtra()方法,它可以把我们想要传递的数据暂存在intent中,启动了另一个活动后,通过getInte ...
- Vue父子之间的值传递
将通过两个input框实现父子之间的值传递作为演示,效果图 先注册父子各一个组件,代码如下 <div id="app"> <parent></pare ...
- html5页面与android页面之间通过url传递参数
html5页面与android页面之间可以通过url传递参数,android将参数放在htm5的url ?后面,js获取url ?号后面的参数. 方法一: <scrīpt> /* 用途 ...
- ASP.NET页面之间数据传递的几种方法
1)Request.QueryString 在ASP时代,这个是较常用的方法,到了ASP.NET,好像用的人不多了,但是不管怎么说,这是一个没有过时,且很值得推荐的方法,因为不管是ASP还是ASP ...
- vue 组件之间数据传递(七)
1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...
- 13. VUE 组件之间数据传递
组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...
- Vue组件之间数据交互与通信
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传 ...
- 8.【nuxt起步】-vue组件之间数据交互
那么现在问题来了,我现在是在index.vue获取了服务端的数据,怎么传值到maincontent.vue?当然你也可以把获取数据放在maincontent.vue,但假如有些数据同时在header, ...
随机推荐
- Java 集合(List、Set、Map 等)相关问答归纳再整理
写在最前面 这个项目是从20年末就立好的 flag,经过几年的学习,回过头再去看很多知识点又有新的理解.所以趁着找实习的准备,结合以前的学习储备,创建一个主要针对应届生和初学者的 Java 开源知识项 ...
- Mybatis系列全解(五):全网最全!详解Mybatis的Mapper映射文件
封面:洛小汐 作者:潘潘 若不是生活所迫,谁愿意背负一身才华. 前言 上节我们介绍了 < Mybatis系列全解(四):全网最全!Mybatis配置文件 XML 全貌详解 >,内容很详细( ...
- 太上老君的炼丹炉之分布式 Quorum NWR
分布式系列文章: 1.用三国杀讲分布式算法,舒适了吧? 2.用太极拳讲分布式理论,真舒服! 3.诸葛亮 VS 庞统,拿下 Paxos 共识算法 4.用动图讲解分布式 Raft 5.韩信大招:一致性哈希 ...
- 代理模式详解:静态代理、JDK动态代理与Cglib动态代理
代理模式简介分类 概念 代理,是为了在不修改目标对象的基础上,增强目标方法的业务逻辑. 客户类需要执行的是目标对象的目标方法,但是真正执行的是代理对象的代理方法,客户类对目标对象的访问是通过代 ...
- 学员和教师管理优化用例点整理v2.0
更新记录: 更新内容 更新人 更新时间 新建 Young 2021.01.08 12:06 彭洋洋确认结果疑问 Young 2021.01.08 15:06 问题集锦 1. 购买成功页点击完成返回路径 ...
- java内部类 的理解
* 类的第5个成员:内部类 * 1.相当于说,我们可以在类的内部再定义类.外面的类:外部类.里面定义的类:内部类 * 2.内部类的分类:成员内部类(声明在类内部且方法外的) vs 局部内部类(声明在类 ...
- golang 实现求两向量夹角
type Vector3 struct { X float64 `json:"x"` Y float64 `json:"y"` Z float64 `json: ...
- socket 之send和recv原理剖析
认识TCP socket的发送缓冲区和接收缓冲区 当创建一个TCP socket对象的时候会有一个发送缓冲区和一个接收缓冲区,相当与内存中的一片空间 send原理剖析 send是不是直接把数据发送给服 ...
- Android学习之简易版的新闻应用
•准备工作 新建一个项目,命名为 FragmentBestProject,并选择 Empty Activity: 并将项目的模式结构改为 Project 模式: •进入主题 首先,准备好一个新闻实体类 ...
- 使用KeepAlived来实现高可用的DR模型
环境 VMware 16 CentOS8 相关软件 keepalived ipvsadm httpd 准备工作 准备四个节点,如上图,Node01 ~ Node04, 本文默认你会在VMWare上安装 ...