前端页面传值方式汇总（vue）

汇总前端页面传值方式

1.query传参

//路由
{
	path：'/test',
	name:'test',
	component:()=> import('@/view/test')
}

//使用query传参
this.$router.push({
	path:'/test',
	query:{
		id:8,
		data:'query传参'
	}
})


//使用query接收参数
const data = this.$route.query
console.log('query' , data)

路径显示：

2.params（name跳转路径）

//路由
{
	path：'/test/:id/:data',
	name:'test',
	component:()=> import('@/view/test')
}

//使用params传参
this.$router.push({
	name:'test',
	params:{
		id:8,
		data:'params传参'
	}
})


//使用query接收参数
const data = this.$route.params
console.log('params' , data)

路径显示：

3.父传子

//父组件
<template>
	<div class="parentBox">
		<children :children_data="parent_data"></children> //parent_data是传给子组件的值  children_data接收
	</div>
</template>

<script>
	import children  from "./children" //引入子组件
	export default {
		components:{children}, //注册组件
		data(){
			return{
				parent_data:{
					id:1,
					name:'parent'
				}
			}
		},
	}
</script>

//子组件
<template>
	<div class="childrenBox">
		<p>{{children_data}}</p> //显示父组件传来的值
	</div>
</template>

<script>
	export default {
	 	props:{ //组件接收外部传来的数据
	 		children_data:{
	 			type:Object, //传过来的类型
	 			default:{} //默认值
	 		}
	 	},
	}
</script>

4.子传父

//父组件
<template>
	<div class="parentBox">
		<children @children_function="parent_function"></children> //parent_function是当子组件有值要传过来绑定的方法名
	</div>
</template>

<script>
	import children  from "./children" //引入子组件
	export default {
		components:{children}, //注册组件
		methods:{
			//接收子组件传来的值
			parent_function(data){
				console.log(data)
			}
		}
	}
</script>

//子组件
<template>
	<div class="childrenBox">
		<buttom @click="toParent"></buttom> //点击事件，一点击就将值传给父组件
	</div>
</template>

<script>
	export default {
		methods:{
			toParent(){
				let data = {
					id:5,
					name:'children'
				}
				this.$emit('children_function' , data ) //第一个参数为父组件绑定的方法名 第二个参数为需要传递的参数
			}
		}
	}
</script>

5.事件总线 $emit $on $off

1.创建一个事件总线的文件，类似直通车

//写着两段就可以了
import Vue from 'vue'
export default new Vue();

2.在需要传递的页面引入(这里举例B向A页面传递值)

//B页面
import EventBus from './transferStation.js';
export default {
	methods:{
		toPage(){
			let data = 80
			transferStation.$emit('fullYearAge', data ) //定义方法名，通过$emit传递
		}
	}
}


//A页面
import EventBus from './transferStation.js';
export default {
	created(){
		transferStation.$on('fullYearAge', (value) => { //通过方法名接收
            console.log(value)
        })
	},
	
	//离开页面记得移除自定义事件监听器。防止$on多次触发，需要$off进行销毁。
	beforeDestroy() {
        transferStation.$off('fullYearAge')
    },
	
}

6.vuex（放入状态管理模式）

user.js

export default {
    namespaced: true,
    state: {
        username:''
    },
    mutations: {
    	//赋值username方法
        resetUser(state, payload) {
           state.username = payload
        },
    },
    //通过getters拿username值
    getters: {
    	username_getter: state => state.username,
    },
}

A.js

export default {
	methods:{
		toUsername(){
			//使用commit放入vuex里
			this.$store.commit('user/resetUser', '张小宝')
		}
	}
}

B.js

<template>
	<p>我的名字是{{username_getter}}</p>
</template>
import { mapGetters } from 'vuex' //引入mapGetters辅助方法
export default {
	computed: {
		...mapGetters([
			'username_getter' //getter中你自定义的名称
		])
	}
}


//方法二(不使用mapGetters，直接取值)
<template>
	<p>我的名字是{{$store.state.user.username}}</p>
</template>