uniapp页面间传参-父页面向子页面传递参数
uniapp中比较常用的就是页面间传递参数了。我这里举的例子是,当登录成功时,想主页面传递用户名。话不多说,上主菜。第一步:项目-store-index.js:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {u...
·
uniapp中比较常用的就是页面间传递参数了。我这里举的例子是,当登录成功时,想主页面传递用户名。
话不多说,上主菜。
第一步:项目-store-index.js :
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userName: "",
},
mutations: {
login(state, userName) {
state.userName = userName;
},
}
})
export default store
第二步:登录(login.vue)页面传递参数:
<template>
<view class="content">
<view class="input-group">
<view class="input-row border">
<text class="title">账号 |</text>
<m-input class="m-input" type="text" clearable focus v-model="u_mobile" placeholder="请输入账号"></m-input>
</view>
<view class="input-row">
<text class="title">密码 |</text>
<m-input type="password" displayable v-model="u_pwd" placeholder="请输入密码"></m-input>
</view>
</view>
<view class="btn-row">
<button type="primary" class="primary" @tap="bindLogin">登录</button>
</view>
</view>
</template>
<script>
import service from '../../service.js';
import {
mapState,
mapMutations
} from 'vuex'
import mInput from '../../components/m-input.vue'
export default {
components: {
mInput
},
data() {
return {
u_mobile: '',
u_pwd: '',
}
},
methods: {
...mapMutations(['login']),
bindLogin() {
/**
* 此处为 对账号信息进行一些必要的校验。
* 省略不写。
*/
/**
* 校验合格后,使用 uni.request 将账号信息发送至服务端,客户端在回调函数中获取结果信息。
*/
uni.request({
url: 'http://10.10.161.60:10864/installment/client/pwdLogin', //接口地址。
method: 'POST',
data: {
uMobile: this.u_mobile,
uPwd: this.u_pwd,
},
success: (res) => {
var jsObject = res.data;
if(jsObject.msg_code === 0){
uni.showToast({
icon: 'none',
title: '账密登录成功!'
});
this.toMain(this.u_mobile);
return;
}
}
});
},
toMain(userName) {
this.login(userName);
uni.navigateTo({
url: '../main/main',
});
}
},
}
</script>
第三步:主页面(main.vue)接收参数:
<template>
<view class="content">
<view v-if="hasLogin" class="hello">
<view class="ul">
<view class="title">您好,{{userName}}。</view>
</view>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex'
export default {
computed: mapState([ 'userName']),
data() {
return {
userName: this.userName,
};
},
}
</script>
此时,主页面就已经接收到用户名了。
如有不明白之处,欢迎留言。
更多推荐
已为社区贡献3条内容
所有评论(0)