首页 > web前端 > Vue.js > 正文

vue传参的三种方式是什么

青灯夜游
发布: 2021-09-01 10:48:05
原创
29725人浏览过
vue传参的三种方式:1、利用路由的name属性来传参,通过“$route.name”来接收参数;2、通过router-link中的to属性来传参;3、使用path来匹配路由组件,采用url来传参。

vue传参的三种方式是什么

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

第一种:使用name传递

之前一直在配置路由的时候出现一个name,但不知道他具体有什么用,在路由里他可以用来传递参数。在index.js中将路由的name都写好

立即学习前端免费学习笔记(深入)”;

接收参数:

在我们需要接收它的页面里添加

<p>我是router-name:{{$route.name}}</p>
登录后复制

比如我在这里是在APP.vue中接收的,我希望切换每个页面都能看见参数。

看结果:

但这种方法不太常用,因为我们觉得它不太规整。

第二种:通过router-link中的to属性

利用router-link 中的to来传参,看语法:

<router-link v-bind:to="{name:'xxx',params:{key:value}}"></router-link>
登录后复制

a.首先:to需要绑定;

b.传参使用类似与对象的形式;

c.name就是我们在配置路由时候取的名字;

d.参数也是采用对象的形式。

实际操作一下:

Android数据库SQLite的使用示例 中文WORD版
Android数据库SQLite的使用示例 中文WORD版

Android 提供了三种数据存储方式,第一种是文件存储;第二种是SharedPreferences存储;第三种就是数据库SQLiteDatabase存储。文件存储我就不用多说了,而SharedPreferences可以存取简单的数据(int,double,float.etc),它经常用于数据缓存,因为它读取存储简单。详细可以参见本系列。Android高手进阶教程(七)之----Android 中Preferences的使用! 今天我们将讲一下SQLiteDatabase的使用。而掌握SqliteData

Android数据库SQLite的使用示例 中文WORD版 0
查看详情 Android数据库SQLite的使用示例 中文WORD版

a.在APP.vue中将to里面的路径改成上面那样

<router-link :to="{name:'hellovue',params:{username:'tomcat'}}">hellovue页面</router-link>
登录后复制

这里我们注意to的写法,前面加了冒号,因为那是绑定的,传递一个username过去,值为tomcat

b.在index.js里面给hellovue配置名字叫hellovue,与上面name相对应

c、在hellovue.vue中接收参数

 <p>传递的名字是:{{$route.params.username}}</p>
登录后复制

看看结果:

第三种:使用path来匹配路由组件,采用url传参

在路由文件里采用冒号的形式传参,这就是对参数的绑定

a、修改index.js里的path,这里我们修改myjob.vue组件

b、在App.vue组件里传递参数

c、在myjob.vue组件里显示我们要展示的内容(接收参数)

d、看看结果

相关推荐:《vue.js教程

以上就是vue传参的三种方式是什么的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号