之前开发了一款蓝牙工具,本想着使用android原生开发,无意间发现uniapp也可以进行底层开发,结果一系列踩坑开始,几次尝试后,终于没有问题了,今天总结下我用到的页面传值。
一、子标签回传数据:
在开发过程中,我们的代码最好能够实现低耦合,也就是说,页面和子标签之间不要过于依赖,这样既能够实现底层代码复用,也让单个界面干净不少,举个例子:
我们写了一个界面,里面有列表,而且这些列表元素样式很复杂,那么我们就应该单一的写一个列表元素样式,让后在本界面里面复用,但是,子标签里面的值如何回传呢,代码:
子标签代码:
<template>
<view class="message-list">
<view class="u-f-ac u-f-jsb" @tap="btBackValue">名称:{{item.name}}年龄:{{item.age}</view>
</view>
</template>
<script>
export default{
props:{
item:Object,
index:Number
},
methods:{
//点击列表元素后执行该方法
btBackValue(){
//往列表界面传值(connectBackV为回传的方法标识)
this.$emit('connectBackV', {
name: this.item.name,
age: this.item.age
});
}
}
}
</script>
<style scoped>
.message-list{
border-bottom: 1upx solid #EEEEEE;
padding: 20upx 0;
}
</style>
本页面代码:
<template>
<view>
<!--列表-->
<block v-for="(item,index) in list" :key="index">
<messageList :item="item" :index="index" @connectBackV="connectBackV"></messageList>
</block>
</view>
</template>
<script>
import messageList from "../../components/listTest/BT-list.vue";
export default {
components: {
messageList
},
data() {
return {
list: [
{name:"张三",age:21},
{name:"李四",age:22},
{name:"王五",age:25}
]
}
},
methods: {
//接受点击后回传的值
connectBackV(e){
console.log("电子子标签后的回传值为:"+e);
console.log("点击了:"+e.name+"年龄为:"+e.age);
}
}
}
</script>
<style>
</style>
现在,界面会以列表显示出张三,李四,王五三条数据,当任意点击一条后,后台会打印出信息
二、子界面向上级界面回传数据:
此方式应用在,点击按钮跳转到子界面,子界面在任意地方向上级界面回传数据
父页面代码:
<view>
<button type="primary" size="mini" @tap="gotoSubFrame">跳转到子页面</button>
</view>
<script>
export default {
methods{
gotoSubFrame(){
//新建监听事件
uni.$on('value1', function(e){
//关闭当前监听(防止浪费资源,先关闭后执行其他操作)
uni.$off('value1');
console.log("子页面回传数据为:"+e);
});
//跳转到子页面
uni.navigateTo({
url: 'subFrame'
});
}
}
}
</script>
子页面代码:
<view>
<button type="primary" size="mini" @tap="sendValue">向父页面传值并返回父页面</button>
</view>
<script>
export default {
methods{
sendValue(){
//传值
uni.$emit('value1',"啦啦啦,这是子页面回传值");
//返回父页面
uni.navigateBack();
}
}
}
</script>
运行后点击按钮,后台打印数据:
子页面回传数据为:啦啦啦,这是子页面回传值