## 路由传参
"""
转跳:
<router-link :to="'/course/'+course.id">{{course.name}}</router-link>
路由:
{
path: '/course/:course_id',
name: 'detail',
component: Detail
}
获取:
this.$route.params.course_id
""""""
转跳:
<router-link :to="{name: 'detail', params: {id: course.id}}">{{course.name}}</router-link>
路由:
{
path: '/detail',
name: 'detail',
component: Detail
}
获取:
this.$route.params.id
""""""
转跳:
<router-link @click="routeAction(course.id)">{{course.name}}</router-link> routeAction(course_id) {
this.$router.push({
name: 'detail',
params: {
id: course_id
}
})
}
路由:
{
path: '/detail',
name: 'detail',
component: Detail
}
获取:
this.$route.params.id
"""## 仓库传参
"""
仓库:
export default new Vuex.Store({
state: {
course_id: 0
},
mutations: {
set_course_id (state, value) {
state.course_id = value
}
},
actions: {}
}) 传递:
routeAction(course_id) {
this.$router.push('detail')
this.$store.commit('set_course_id', course_id);
}
路由:
{
path: '/detail',
name: 'detail',
component: Detail
}
获取:
create() {
window.console.log(this.$store.state.course_id)
} """

前端vue组件传参的更多相关文章

  1. vue组件传参

    一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以 ...

  2. vue 组件传参

    路由配好了 再传个参呗 注:组件信息流转的时候只能单向1 > 父子传参传参:通过属性prop:传递数据 a.父组件传参给子组件 子组件: <ul> <li v-for=&quo ...

  3. vue 组件传参及跨域传参

    可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...

  4. vue组件传参的方法--bus事件总线

    定义:事件总线是实现vue任意组件之前传递参数的一种编程技巧,本质上就是组件的自定义事件.事件总线有很多种写法,具体的思路就是创造一个大家都可以访问到的公共的属性,在这个公共的属性上面可以调用$on, ...

  5. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  6. vue 父子组件传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  7. Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)

    一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...

  8. vue父组件传参给子组件

    其实组件之间传参有很多种方法: 1.通过本地存储 2.使用vuex状态管理 今天记录一下第三种方法 1.首页我们先创建一个项目(创建项目自行百度) 2.打开项目,在components文件夹下新建一个 ...

  9. 【vue】父向子组件传参、子组件向父传参

    1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...

随机推荐

  1. 爬虫之操作excel

    几种常用模块的使用方法 注释:Excel 2003 即XLS文件有大小限制即65536行256列,所以不支持大文件,而Excel 2007以上即XLSX文件的限制则为1048576行16384列 下面 ...

  2. JQuery 行内编辑(即点即改)

    行内编辑 下面是详细的代码: <style> .dian { cursor: pointer; } </style> //这个让鼠标 移动到 span上 的时候 是一个小手 & ...

  3. dpkg 删除 百度网盘 程序

    sudo dpkg -l baidu* 查询得到具体名字 sudo dpkg --purge baidunetdisk 解决

  4. go语言规范之方法集

    Go语言规范里定义的方法集的规则 Values Methods Receivers ----------------------------------------------- T (t T) *T ...

  5. 一文教你读懂Python中的异常信息

    正文共:11813 字 2 图 预计阅读时间: 30 分钟 原文:https://realpython.com/python-traceback/ 译者:陈祥安 原文有所改动. 在写 Python 代 ...

  6. CTF辅助脚本

    首先推荐这篇文章,网上有多次转载,这是我见过日期比较早的 CTF中那些脑洞大开的编码和加密 凯撒密码 flag='flag{abcdef}' c='' n=20 for i in flag: if ' ...

  7. 20175313 张黎仙《Java程序设计》第十周学习总结

    目录 一.教材学习内容总结 二.教材学习中的问题和解决过程 三.代码调试中的问题和解决过程 四.代码托管 五.心得体会 六.学习进度条 七.参考资料 一.教材学习内容总结 第十二章内容 主要内容 杂项 ...

  8. C#winform和百度API互动-----之JS读取中C#中的函数

    例子1 线上JS var getcpylocation =window.external.getlocation(); map.centerAndZoom(getcpylocation,12); C# ...

  9. SpringBoot 2.x中为tomcat配置ssl(https)支持

    参考来源:https://www.cnblogs.com/imfjj/p/9058443.html https://blog.csdn.net/jackymvc/article/details/810 ...

  10. 使用Python处理Excel表格的简单方法

    使用Python处理Excel表格的简单方法 这篇文章主要介绍了使用Python处理Excel表格的简单方法,本文给大家介绍的非常详细,需要的朋友可以参考下 Excel 中的每一个单元,都会有这些属性 ...