vue两个组件间值的传递或修改方式


Posted in Javascript onJuly 04, 2018

1、可以用公共的父组件来实现;

2、可以在store.js里面在设置公共变量;

3、也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改本地存储的值和获取修改后的值来实现;

4、就是父子组件间的值的传递与修改props,这里需要注意的是子组件里面不      能直接修改props里面接受的值,需要定义一个中间变量来接受props里的值并修改,通过$emit即this.$emit('checkDisplay',this.displayChild);来传给父组件

5、也可以通过路由来传值query,params,    

    a、  //跳转页面并传值

this.$router.push({path:'/index',query:{name:'haha'}}) 
   //获取传递过来的数据
   this.$route.query.name

  b、 或者是 //跳转页面并传值 

要记住的是params只能用name跳转,如果用path来传值则传不过去  ,而且这种传值页面刷新后所传值将清空

this.$router.push({name:'index',params:{name:'nana'}})
   //获取传递过来的数据
   this.$route.params.name

     c、也可以直接传值

this.$router.push('/index/'+item.name)  //跳转页面并传值,不过这种传值前提需在路由里面在路径后面添加“/路径/:参数名”
   this.$route.params.参数名            //获取数据

     但是这种方式会在地址栏显示数据,不安全

6、路径地址传值,params、query是什么?

params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params,及上面方法c

query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。和上面方法a同理

当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。

总结

以上所述是小编给大家介绍的vue两个组件间值的传递或修改方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 #jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 #jQuery
React组件内事件传参实现tab切换的示例代码
Jul 04 #Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 #Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 #Javascript
Redux实现组合计数器的示例代码
Jul 04 #Javascript
用Node编写RESTful API接口的示例代码
Jul 04 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
js实现表格字段排序
2014/02/19 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
python能做什么 python的含义
2019/10/12 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
新闻工作者先进事迹
2014/05/26 职场文书
社区党员公开承诺书
2014/08/30 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
纪录片信仰观后感
2015/06/08 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python