美文网首页
页面传参的常见方法

页面传参的常见方法

作者: 琳媚儿 | 来源:发表于2020-07-28 10:57 被阅读0次

方法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);
        },

}

相关文章

网友评论

      本文标题:页面传参的常见方法

      本文链接:https://www.haomeiwen.com/subject/rkaplktx.html