首页 > 其他 > 详细

前端vue组件传参

时间:2019-09-23 10:44:55      阅读:68      评论:0      收藏:0      [点我收藏+]

 

 

## 路由传参
"""
转跳:
<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组件传参

原文:https://www.cnblogs.com/lakei/p/11228248.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!