前端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与 ...
随机推荐
- java试题复盘——9月8日
上: 1.可将语句块或方法设为同步使用的语句是(A) A synchronized 用于方法或者代码块前,使此方法或者代码变成同步的 B static ...
- Echarts 设置 图标 默认平铺 数据为零时绘画
好久没写了 最近接了一个统计的功能 以前写的都是一些最基础的统计 废话少说 我先把自己遇到的问题列出来 仅供参考 __________________我是分割线__________________ ...
- Angular4.x+Ionic3 踩坑之路之打包时出现JAVASCRIPT HEAP OUT OF MEMORY的几种解决办法
最近开发的一个比较大型的App时打生产环境包是出现内存不足导致打包失败的问题.然后百度发现解决方法都是一样,自己试了一下都没什么暖用,心里只想用呵呵来形容了.最后经朋友介绍,技术问题还得去谷歌,git ...
- Hexo博客skapp主题部署填坑指南
相信大家都很喜欢 hexo skapp 的主题,由于作者采用结巴分词,加上需要依赖各种各样的环境 所以可能大家踩过很多坑,也许每个人踩得坑不一样,这里使用 Docker 容器 centos 来部署, ...
- C++ fill fill_n generate generate_n
#include <iostream>#include <algorithm>#include <vector>#include <list>#incl ...
- 05-06 Flutter JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染:Flutter创建商品数据模型 、请求Api接口渲染热门商品 推荐商品
Config.dart class Config{ static String domain='http://jd.itying.com/'; } FocusModel.dart class Focu ...
- 停止monkey的方法
注意 Monkey启动后会不断地向被测对象发送随机事件流,直到事件执行完毕或者发生异常时才停止.在Monkey运行过程中,即便断开 与PC的连接,Monkey依然可以在手机上继续运行. 停止Monke ...
- Gogs 设置Git钩子实现项目自动部署
每次修改代码需要上传到 git仓库,查看了一下 Gogs 使用文档 发现有 web钩子 这个选项,然后发现了本地可实现的 Git钩子. 注意:需要用到管理员帐号登录,进行仓库的设置. 有三种状态分别是 ...
- Fabric docker-compose volumes配置解析
chaincode: container_name: chaincode image: hyperledger/fabric-ccenv tty: true environment: - GOPATH ...
- 【FFMPEG】ffmpeg 中添加264支持
ffmpeg 中带有264的解码,没有编码,需要添加x264: 参考百度上的"windows_ffmpeg编译 " 文档 下载ffmpeg 代码合x264代码, ffmpeg 代码 ...