vue是由一个个组件组合而成的页面,今天我们就来说一下页面之间数据的传递. 
我们经常会在后台管理系统看到用户详情,有添加用户和编辑用户.有时候我们的添加和编辑是在同一页面上以模态框的形式展现的,但有的时候则是以另一兄弟页面的形式展示的,这个时候就需要从主页面向兄弟页面进行传值.在vue中是怎么做到的呢?今天我们用举例子的方式介绍一下. 
在我们现在做的后台管理系统中,有组织机构的页面. 

我们想要的效果是点击树节点获取到组织详情和组织下的人员详情,但这里我们不做过多的介绍,就是一般的后台请求接口的方式,现在我们可以看到上面有两个按钮,分别是添加和编辑. 
我们现在说一下编辑 我们先点击树节点获取到相应的组织结构 

然后如果我们想要编辑组织详情的话,点击编辑(因为内容多)我们想要跳转到另一个页面 
 
因为路径不同,数据该怎样从详情页面传递到编辑页面的呢? 
 
我们点击编辑按钮的时候跳转到我们编辑的路径,同样需要传递给我们编辑页面的有我们向后台获取组织详情时候的id,然后我们在编辑页面需要接收这个id然后在初始化的时候向后台传递这个id,获取相应的详情即可. 

正常的情况下我们接收到需要的id即可.让我们编辑的内容和从后台获取的内容相互绑定即可.这个时候编辑页面的数据就是和详情页面的是一样的.

vue页面之间数据的传递的更多相关文章

  1. vue组件之间数据的传递

    父子组件通信 父组件向子组件传递数据: 1.通过子组件的 props 选项声明它期待获得的数据,用以接收父组件传过来的值. 2.在子组件标签中使用子组件props中创建的属性 3.父组件中注册子组件 ...

  2. intent,实现两个活动之间数据的传递

    一.Intent 可以启动一个活动,也可以在启动活动的时候传递数据.intent中提供了putExtra()方法,它可以把我们想要传递的数据暂存在intent中,启动了另一个活动后,通过getInte ...

  3. Vue父子之间的值传递

    将通过两个input框实现父子之间的值传递作为演示,效果图 先注册父子各一个组件,代码如下 <div id="app"> <parent></pare ...

  4. html5页面与android页面之间通过url传递参数

    html5页面与android页面之间可以通过url传递参数,android将参数放在htm5的url  ?后面,js获取url  ?号后面的参数. 方法一: <scrīpt> /* 用途 ...

  5. ASP.NET页面之间数据传递的几种方法

    1)Request.QueryString   在ASP时代,这个是较常用的方法,到了ASP.NET,好像用的人不多了,但是不管怎么说,这是一个没有过时,且很值得推荐的方法,因为不管是ASP还是ASP ...

  6. vue 组件之间数据传递(七)

    1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...

  7. 13. VUE 组件之间数据传递

    组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...

  8. Vue组件之间数据交互与通信

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传 ...

  9. 8.【nuxt起步】-vue组件之间数据交互

    那么现在问题来了,我现在是在index.vue获取了服务端的数据,怎么传值到maincontent.vue?当然你也可以把获取数据放在maincontent.vue,但假如有些数据同时在header, ...

随机推荐

  1. js中数据、内存、变量的概念及三者之间的关系

    目录 数据.内存.变量的概念及三者之间的关系 什么是数据 数据的特点 什么是内存 栈内存 堆内存 JS引擎如何管理内存 什么是变量 变量是普通类型时 变量是引用类型时 数据.内存.变量的三者之间的关系 ...

  2. Ch1-What is DAX?

    What is DAX? 数据分析表达式 (DAX) 是在 Analysis Services.Power BI 以及 Excel 中的 Power Pivot 使用的公式表达式语言.在第一版Powe ...

  3. MySQL之九---分布式架构(Mycat/DBLE)

    MyCAT基础架构图 双主双从结构 MyCAT基础架构准备 准备环境  环境准备: 两台虚拟机 db01 db02 每台创建四个mysql实例:3307 3308 3309 3310 删除历史环境 p ...

  4. Springboot 轻量替代框架 Solon 1.3.10 发布

    Solon 是一个微型的Java开发框架.项目从2018年启动以来,参考过大量前人作品:历时两年,4000多次的commit:内核保持0.1m的身材,超高的跑分,良好的使用体验.支持:RPC.REST ...

  5. FreeBSD 12.2 已经发布 从现有版本更新到12

    #freebsd-update -r 12.2-RELEASE upgrade 如果提示更新第三方软件后,再执行freebsd-update install , 请输入 #pkg update &am ...

  6. 2018ICPC南京K. Kangaroo Puzzle

    题目:在一个20×20的地图上,1表示有袋鼠,0表示有障碍物,边界外和障碍物上不能走.        要求给出一个50000步以内的操作,每一步操作为'L', 'R', 'U', 'D', 表示所有袋 ...

  7. IDA 创建本地类型

    在IDA中我们常常使用 shift+F9打开结构体视图,ins 创建结构体,但操作有些繁琐. 我们可以在View-->Open Subviews-->Local Types(视图--> ...

  8. FutureTask核心源码分析

    本文主要介绍FutureTask中的核心方法,如果有错误,欢迎大家指出! 首先我们看一下在java中FutureTask的组织关系 我们看一下FutureTask中关键的成员变量以及其构造方法 //表 ...

  9. Java学习之this关键字的使用

    •区分成员变量和局部变量 public class Person { String name; int age; public void set(String name,int age) { this ...

  10. OO第四单元总结暨OO课程总结

    一.第四单元作业总结 本单元的主要任务是对 Uml 图元素进行管理和查询,测试一开始会输入一个静态图,之后会对图中相关内容进行查询. 第13,14次作业 第14次作业新增内容很少,故与第13次作业放在 ...