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)
    }
    
    """
    
  • 相关阅读:
    Linux中断的系统调用
    线程的概念
    C++ 虚函数表浅析
    C++虚函数工作原理
    深入浅出单实例Singleton设计模式
    《角斗士》一个帝国的史诗绝唱
    《妖猫传》大唐盛世背后那些事
    程序员之路
    职业规划
    一些重要的算法
  • 原文地址:https://www.cnblogs.com/qianzhengkai/p/11228964.html
Copyright © 2011-2022 走看看