方法1,路由传值
页面A 传值给页面B
页面A:
data() {
return {
community: {
id: '',
name: ''
}
};
将id,name 通过路由方式传给下一个页面
键值对:由键名和键值组成,community_id: this.community.id,
this.$router.push({
path: '/community/addPeople/addHouse',
query: {
community_id: this.community.id,
community_name: this.community.name
}
});
页面B通过onLoad
,接收页面A传来的参数
{{ house_information.community.name }}
data() {
return {
house_information: {
community: {}
}
};
},
data.community_id,通过页面参数data ,获取页面A中的键名
onLoad(data) {
this.house_information.community.id = data.community_id;
this.house_information.community.name = data.community_name;
}
方法2,vuex多量传参
新建store->index.js文件
state
指向communityPeopleRoomApply: {}
对象
param
接收
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
/**
* 以下为人脸使用
* */
communityPeopleRoomApply: {}
/**
* 以上为人脸使用
* */
},
mutations: {
/**
* 以下为人脸使用
* */
setCommunityPeopleRoomApply(state, param) {
for (let key in param) {
state.communityPeopleRoomApply[key] = param[key]
}
},
/**
* 以上为人脸使用
* */
},
getters: {},
actions: {}
})
export default store
页面A
声明对象
data(){
community: {
id: '',
name: ''
}
}
触发setCommunityPeopleRoomApply
方法,并得到数据data
this.$store.commit("setCommunityPeopleRoomApply", data);
methods:{
// 存储数据进入vuex的communityPeopleRoomApply
storageDataInVuexCommunityPeopleRoomApply() {
let data = {
community: this.community,
}
this.$store.commit("setCommunityPeopleRoomApply", data);
console.log("存储数据进入vuex的communityPeopleRoomApply==============", this.$store.state.communityPeopleRoomApply);
},
//跳转时调用`storageDataInVuexCommunityPeopleRoomApply()`方法
go_communityAddPeopleAddHouse(id) {
this.storageDataInVuexCommunityPeopleRoomApply();
this.$router.push({
path: '/community/addPeople/addHouse'
});
}
}
页面B
data(){
return{
house_information: {
community: {},
zone: {},
build: {},
unit: {},
room: {}
},
}
}
methods:{
//获得页面参数,触发setCommunityPeopleRoomApply函数方法,并得到数据,在页面跳转时触发此函数方法,并将参数值传给下一个界面
storageDataInVuexCommunityPeopleRoomApply(){
let data={
zone: this.house_information.zone,
build: this.house_information.build,
unit: this.house_information.unit,
room: this.house_information.room,
}
this.$store.commit("setCommunityPeopleRoomApply",data);
console.log(this.$store.state.communityPeopleRoomApply);
},
},
//接收A页面的参数存放到store中
onLoad(data) {
console.log(this.$store.state.communityPeopleRoomApply);
this.house_information.community = this.$store.state.communityPeopleRoomApply.community;
this.getApiPortalCommunityZoneGetListByCon(); //区域
},
页面C
调用接口方法时将存到页面B的参数取出来
methods:{
apiPortalCommunityPeopleRoomRecordGetCommunityRoomOwner() {
let store = this.$store.state.communityPeopleRoomApply;
this.$api.apiPortal_communityPeopleRoomRecord_getCommunityRoomOwner(
{
community_id: store.community.id,
community_zone_id: store.zone.id,
community_building_id: store.build.id,
community_unit_id: store.unit.id,
community_room_id: store.room.id
},
res => {
console.log('获取房屋业主信息=============', res);
}
);
},
// 存储数据进入vuex的communityPeopleRoomApply:将本页面的数据餐刀 storageDataInVuexCommunityPeopleRoomApply中
storageDataInVuexCommunityPeopleRoomApply() {
let data = {
people_information: this.people_information
};
this.$store.commit('setCommunityPeopleRoomApply', data);
console.log(this.$store.state.communityPeopleRoomApply);
},
}
网友评论