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)
    }
    
    """
    
  • 相关阅读:
    004 使用文本编辑器
    003 第一个Python程序
    002 Python解释器
    001 安装Python
    000 Python教程
    001 Java环境变量配置
    002 基础语法1
    003 基础语法2
    dede首页调用会员积分和头像代码
    DEDE 会员调用方法
  • 原文地址:https://www.cnblogs.com/qianzhengkai/p/11228964.html
Copyright © 2011-2022 走看看