zoukankan      html  css  js  c++  java
  • 前台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)
    }
    
    """
    
  • 相关阅读:
    Jmeter之Bean shell使用(一)
    CSS知识点 2
    0523 CSS知识点
    0522 HTML表单 CSS基础
    0521 HTML基础
    0515线程
    0514 队列 管道 进程池 回调函数
    0510进程 multiprocess模块
    0509操作系统发展史 进程
    0507黏包
  • 原文地址:https://www.cnblogs.com/qianzhengkai/p/11228964.html
Copyright © 2011-2022 走看看