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, ...
随机推荐
- 如何掌握 C 语言的一大利器——指针?
一览:初学 C 语言时,大家肯定都被指针这个概念折磨过,一会指向这里.一会指向那里,最后把自己给指晕了.本文从一些基本的概念开始介绍指针的基本使用. 内存 考虑到初学 C 语言时,大家可能对计算机的组 ...
- Dos常用命令整理
Dos常用命令整理 打开cmd的方法 开始菜单 -> 系统 -> 命令提示符 组合键Win+R打开运行 -> 输入cmd 在任意文件夹下Shift+鼠标右键 -> 在此处打开命 ...
- canal mysql select权限粒度
今天产品问了一个问题,问懵了 产品:canal在开通mysql权限时需要哪些权限 我:SELECT, REPLICATION SLAVE, REPLICATION CLIENT 产品:那SELECT权 ...
- CVE-2015-1635-HTTP.SYS远程执行代码
这个漏洞刚好是在挖SRC的时候找到的,漏洞危害能打到服务器蓝屏,以下只作验证 参考 https://www.jianshu.com/p/2e00da8a12de https://blog.csdn.n ...
- rest framework parsers
解析器 机交互的Web服务更倾向于使用结构化的格式比发送数据格式编码的,因为他们发送比简单的形式更复杂的数据 -马尔科姆Tredinnick,Django开发组 REST框架包含许多内置的解析器类,允 ...
- FreeBSD 12.2 已经发布 从现有版本更新到12
#freebsd-update -r 12.2-RELEASE upgrade 如果提示更新第三方软件后,再执行freebsd-update install , 请输入 #pkg update &am ...
- Java高并发编程基础三大利器之CountDownLatch
引言 上一篇文章我们介绍了AQS的信号量Semaphore<Java高并发编程基础三大利器之Semaphore>,接下来应该轮到CountDownLatch了. 什么是CountDownL ...
- Java并发编程之队列
Deque(双端队列) 子接口BlockingDeque,实现类如下: ArrayDeque:大下可变的数组双端队列,不允许插入null LinkedList:大小可变的链表双端队列,允许插入null ...
- 【安全研究】Domain fronting域名前置网络攻击技术
出品|MS08067实验室(www.ms08067.com) 千里百科 Domain Fronting基于HTTPS通用规避技术,也被称为域前端网络攻击技术.这是一种用来隐藏Metasploit,Co ...
- 软件漏洞--Hello-Shellcode
软件漏洞--Hello-Shellcode 使用上一次的栈溢出的漏洞软件 可以直接通过栈溢出来修改返回值,或者要跳转的函数地址 实现一个ShellCode来跳转自己的代码 源bug软件代码 #defi ...