## 路由传参
"""
转跳:
<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. Java并发指南13:Java7/8 中的 HashMap 和 ConcurrentHashMap 全解析

    Java7/8 中的 HashMap 和 ConcurrentHashMap 全解析 转自https://www.javadoop.com/post/hashmap#toc7 部分内容转自 http: ...

  2. DataTable 转换为List

           注意table 列的参数类型,若不为string 需要详细声明 如 typeof(Int32)          public static IList<T> Convert ...

  3. uwsgi+nginx部署django项目

    1. 概念解析(wsgi协议,uwsgi协议,uWSGI) 参考:https://www.cnblogs.com/wspblog/p/8575101.html 1.1 现实世界的web请求: 1.2  ...

  4. SQL-W3School-基础:SQL AND & OR 运算符

    ylbtech-SQL-W3School-基础:SQL AND & OR 运算符 1.返回顶部 1. AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤. AND 和 OR 运算符 ...

  5. Kali Linux更新5.2.9后 Vmware Workstation无法正常启动

    说明本脚本仅作为学习使用,请勿用于任何商业用途.本文为原创,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 最近更新了Kali后发现一个奇葩的问题,我的虚拟机不能正常使用了.启 ...

  6. 启动elasticsearch的时候报出Exception in thread "main" SettingsException[Failed to load settings from /usr/local/elasticsearch/config/elasticsearch.yml]; nested: MarkedYAMLException[while scanning a simple ke

    故障现象: [elasticsearch@tiantianml- ~]$ /usr/local/elasticsearch/bin/elasticsearch Exception in thread ...

  7. C++ STL copy copy_backward

    #include <iostream>#include <algorithm>#include <vector>#include <functional> ...

  8. PostgreSQL 之 CREATE FUNCTION

    官方文档 语法: CREATE [ OR REPLACE ] FUNCTION name ( [ [ argmode ] [ argname ] argtype [ { DEFAULT | = } d ...

  9. golang web框架设计1:框架规划

    GO WEB 编程13节,如何设计一个web框架 学习谢大的web框架设计 总体介绍 实现一个简易的web框架,我们采用mvc模式来进行开发. model:模型,代表数据结构.通常来说,模型类时包含查 ...

  10. python之selenium玩转鼠标操作(ActionChains)

    前提: 一般人用selenium自动化时,会用到模拟鼠标操作的情况,像单击,双击,右击,左击啊等,这个时候我们就要用到ActionChains了. 内容: 1.ActionChains用法整理 cli ...