前端vue组件传参
## 路由传参
"""
转跳:
<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组件传参的更多相关文章
- vue组件传参
一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以 ...
- vue 组件传参
路由配好了 再传个参呗 注:组件信息流转的时候只能单向1 > 父子传参传参:通过属性prop:传递数据 a.父组件传参给子组件 子组件: <ul> <li v-for=&quo ...
- vue 组件传参及跨域传参
可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...
- vue组件传参的方法--bus事件总线
定义:事件总线是实现vue任意组件之前传递参数的一种编程技巧,本质上就是组件的自定义事件.事件总线有很多种写法,具体的思路就是创造一个大家都可以访问到的公共的属性,在这个公共的属性上面可以调用$on, ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- vue 父子组件传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
- vue父组件传参给子组件
其实组件之间传参有很多种方法: 1.通过本地存储 2.使用vuex状态管理 今天记录一下第三种方法 1.首页我们先创建一个项目(创建项目自行百度) 2.打开项目,在components文件夹下新建一个 ...
- 【vue】父向子组件传参、子组件向父传参
1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...
随机推荐
- 文件对比工具 Beyond Compare 4.2.9中文破解版for win 附通用注册码
链接: https://pan.baidu.com/s/1yYxPo8nNv0PuOA1ZC9-F1w 提取码: v76g 注册码: --- BEGIN LICENSE KEY --- H1bJTd2 ...
- c++ 排序,<< 运算符重载
#include <iostream> #include <functional> #include <list> using namespace std; ost ...
- Kinect v1 (Microsoft Kinect for Windows v1 )彩色和深度图像对的采集步骤
Kinect v1 (Microsoft Kinect for Windows v1 )彩色和深度图像对的采集步骤 一.在ubuntu下尝试 1. 在虚拟机VWware Workstation 12. ...
- 【Robot Framework 项目实战 04】基于录制,生成RF关键字及 自动化用例
背景 因为服务的迁移,Jira版本的更新,很多接口文档的维护变少,导致想要编写部分服务的自动化测试变得尤为麻烦,很多服务,尤其是客户端接口需要通过抓包的方式查询参数来编写自动化用例,但是过程中手工重复 ...
- java 架构师思维导图
java 基础 . 理解IO.多线程.集合等基础框架.对JVM原理有一定了解. spring spring boot ibatis structs开源框架了解. 熟悉分布式系统设计和应用. 小 ...
- 安装使用VUE
安装使用VUE 如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpac ...
- Java实现单例的5种方式
1. 什么是单例模式 单例模式指的是在应用整个生命周期内只能存在一个实例.单例模式是一种被广泛使用的设计模式.他有很多好处,能够避免实例对象的重复创建,减少创建实例的系统开销,节省内存. 2. 单例模 ...
- FMX开源控件
FMX开源控件 这是群友谢顿做的控件,必须赞一个! https://github.com/zhaoyipeng/FMXComponents 这是loki的: https://sourceforge.n ...
- 【403】COMP9024 Exercise
Week 1 Exercises fiveDigit.c There is a 5-digit number that satisfies 4 * abcde = edcba, that is,whe ...
- 嵌入(embedding)层的理解
首先,我们有一个one-hot编码的概念. 假设,我们中文,一共只有10个字...只是假设啊,那么我们用0-9就可以表示完 比如,这十个字就是“我从哪里来,要到何处去” 其分别对应“0-9”,如下: ...