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. ”capslock+“ 一款超级文本编辑外挂

    "capslock+" 一款超级文本编辑外挂 彻底释放大写锁定键"caps lock" 潜力的强大工具 一.基础功能 CapsLock按键与以下按键的组合 实现 ...

  2. vue之better-scroll详解及封装

    在我们的h5或移动端网页开发中,常常会需要实现滚动加载数据,等需求,而在开发中原生开发往往会带来意想不到的问题,因此我们引入better-scroll来帮我们实现流畅的滚动效果. 什么是better- ...

  3. 【odoo14】第十五章、网站客户端开发

    odoo的web客户端.后台是员工经常使用的地方.在第九章中,我们了解了如何使用后台提供的各种可能性.本章,我们将了解如何扩展这种可能性.其中web模块包含了我们在使用odoo中的各种交互行为. 本章 ...

  4. SpringSecurity实战记录（一）开胃菜：基于内存的表单登录小Demo搭建

    Ps:本次搭建基于Maven管理工具的版本,Gradle版本可以通过gradle init --type pom命令在pom.xml路径下转化为Gradle版本(如下图) (1)构建工具IDEA In ...

  5. PTA 求链表的倒数第m个元素

    6-7 求链表的倒数第m个元素 (20 分)   请设计时间和空间上都尽可能高效的算法,在不改变链表的前提下,求链式存储的线性表的倒数第m(>)个元素. 函数接口定义: ElementType ...

  6. C语言结构体及其内存布局

    code[class*="language-"], pre[class*="language-"] { color: rgba(51, 51, 51, 1); ...

  7. N皇后求解。万万没想到，只用一个一维数组就搞定了。还体现了回溯。

    一.啥是N皇后?先从四皇后入手 给定一个4x4的棋盘,要在棋盘上放置4个皇后.他们的位置有这样的要求,每一列,每一行,每一对角线都能有一个皇后. 你可能会对这个对角线有疑惑,其实就是每一个小正方形的对 ...

  8. 【小白学算法】5.链表(linked list)、链表的添加

    链表其实也就是 线性表的链式存储结构,与之前讲到的顺序存储结构不同. 我们知道顺序存储结构中的元素地址都是连续的,那么这就有一个最大的缺点:当做插入跟删除操作的时候,大量的元素需要移动. 如图所示,元 ...

  9. OCPC产品初探

    OCPC即Optimization CPC,今天我们就来看看它的Optimizaton在哪儿. 在广告模型初探(一)中我们就曾提到过,互联网广告的本质其实就是流量的买卖.是广告主.媒体方以及用户三方之 ...

  10. 微信小程序--简约风博客小程序（基于云开发 - 全开源）

    微信小程序--简约风博客小程序(基于云开发 - 全开源) 项目启动纯属突发奇想,想看看博客小程序,例如wehalo博客小程序,但是感觉自建平台还要浪费自己的服务器算力,还没有访问量,省省吧. 本着白嫖 ...