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)
    }
    
    """
    
  • 相关阅读:
    响应式布局
    C# 基础复习 二 面向对象
    C# 基础复习 一 数据类型
    .net 面试题
    Unity5.X 创建基本的3D游戏场景
    Unity5.X 编辑器介绍
    Unity5.X 开发资源介绍
    SignalR
    vue-cli
    Vue.js
  • 原文地址:https://www.cnblogs.com/qianzhengkai/p/11228964.html
Copyright © 2011-2022 走看看