## 路由传参
"""
转跳:
<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. 文件对比工具 Beyond Compare 4.2.9中文破解版for win 附通用注册码

    链接: https://pan.baidu.com/s/1yYxPo8nNv0PuOA1ZC9-F1w 提取码: v76g 注册码: --- BEGIN LICENSE KEY --- H1bJTd2 ...

  2. c++ 排序,<< 运算符重载

    #include <iostream> #include <functional> #include <list> using namespace std; ost ...

  3. Kinect v1 (Microsoft Kinect for Windows v1 )彩色和深度图像对的采集步骤

    Kinect v1 (Microsoft Kinect for Windows v1 )彩色和深度图像对的采集步骤 一.在ubuntu下尝试 1. 在虚拟机VWware Workstation 12. ...

  4. 【Robot Framework 项目实战 04】基于录制,生成RF关键字及 自动化用例

    背景 因为服务的迁移,Jira版本的更新,很多接口文档的维护变少,导致想要编写部分服务的自动化测试变得尤为麻烦,很多服务,尤其是客户端接口需要通过抓包的方式查询参数来编写自动化用例,但是过程中手工重复 ...

  5. java 架构师思维导图

    java 基础 . 理解IO.多线程.集合等基础框架.对JVM原理有一定了解. spring  spring boot  ibatis   structs开源框架了解. 熟悉分布式系统设计和应用. 小 ...

  6. 安装使用VUE

    安装使用VUE 如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpac ...

  7. Java实现单例的5种方式

    1. 什么是单例模式 单例模式指的是在应用整个生命周期内只能存在一个实例.单例模式是一种被广泛使用的设计模式.他有很多好处,能够避免实例对象的重复创建,减少创建实例的系统开销,节省内存. 2. 单例模 ...

  8. FMX开源控件

    FMX开源控件 这是群友谢顿做的控件,必须赞一个! https://github.com/zhaoyipeng/FMXComponents 这是loki的: https://sourceforge.n ...

  9. 【403】COMP9024 Exercise

    Week 1 Exercises fiveDigit.c There is a 5-digit number that satisfies 4 * abcde = edcba, that is,whe ...

  10. 嵌入(embedding)层的理解

    首先,我们有一个one-hot编码的概念. 假设,我们中文,一共只有10个字...只是假设啊,那么我们用0-9就可以表示完 比如,这十个字就是“我从哪里来,要到何处去” 其分别对应“0-9”,如下: ...