前端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与 ...
随机推荐
- Fltiss项目的架构、包名的定义和类的划分
这是项目的一览 首先Web根目录. 除了WEB-INF以外,还有css,img,js,lib目录,这四者都是静态资源. 由于客户端无法访问WEB-INF下的内容,所以将它们放置在了Web根目录下. 而 ...
- TCP SACK 介绍 转载
一.SACK选项 默认情况下TCP采取的是累积确认机制,这时如果发生了报文乱序到达,接收方只会重复确认最后一个按序到达的报文段,为此发送方的处理只能是重复按序到达接收方的报文段之后的那个报文段,因而它 ...
- elasticsearch java client
1.集群名相同,且机器处于同一局域网同一网段,es会自动去发现其他的节点.2.集群不在同一局域网同一网段时,只需要在 elasticsearch.yml 中配置目标机器和端口即可discovery.z ...
- 使用Vagrant配置本地开发环境
从二零一四年开始使用vagrant+VirtualBox搭建linux开发环境,配置简单灵活,后台运行占用内存少,比vmware好用很多,果断弃用vmware转投vagrant的怀抱:无论是个人搭建开 ...
- Async and Await (Stephen Cleary)
https://blog.stephencleary.com/2012/02/async-and-await.html Most people have already heard about the ...
- python 语法糖是什么意思
语法糖指那些没有给计算机语言添加新功能,而只是对人类来说更“甜蜜”的语法.语法糖往往给程序员提供了更实用的编码方式,有益于更好的编码风格,更易读.不过其并没有给语言添加什么新东西.
- UML期末复习题——2.3:UML State Diagram
第三题 状态图 重要概念: 1.定义:事件.状态和转换: 事件:指一件值得注意的事情的发生. 状态:指对象在事件发生之间某时刻所处的情形. 转换:两个状态之间的关系.它表明当某事件发生时,对象从先前 ...
- IP拨号器
是一个最终的接收者 package com.example.ip; import android.content.BroadcastReceiver; import android.content.C ...
- PHP mysql_num_rows() 函数 返回结果集中行的数目。
定义和用法 mysql_num_rows() 函数返回结果集中行的数目. 语法 mysql_num_rows(data) 参数 描述 data 必需.结果集.该结果集从 mysql_query() 的 ...
- delphi type
声明: 1. type Name = Existing type; 2. type Name = type Existing type; 3. type Name = (EnumValue1 [=va ...