網站首頁 編程語言 正文
方法一（父向子傳遞數據）：
父頁面
<!--頁面組件-->
<params v-if="tabs.length-TabCur>3" :tabcur='TabCur'></params>子頁面接收
props: {
tabcur: {
type: Number,
default: ''
}
},方法二：
通過全局變量（Vue原型掛載、或者App.vue golabledata）或者緩存uni.setStorageSync();實現
方法三：
uni.$emit(eventName,OBJECT)
觸發全局的自定事件。附加參數都會傳給監聽器回調。
| 屬性 | 類型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| OBJECT | Object | 觸發事件攜帶的附加參數 |
代碼示例
uni.$emit('update',{msg:'頁面更新'})uni.$on(eventName,callback)
監聽全局的自定義事件。事件可以由 uni.$emit 觸發，回調函數會接收所有傳入事件觸發函數的額外參數。
| 屬性 | 類型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回調函數 |
代碼示例
uni.$on('update',function(data){
console.log('監聽到事件來自 update ，攜帶參數 msg 為：' + data.msg);
})uni.$once(eventName,callback)
監聽全局的自定義事件。事件可以由 uni.$emit 觸發，但是只觸發一次，在第一次觸發之后移除監聽器。
| 屬性 | 類型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回調函數 |
代碼示例
uni.$once('update',function(data){
console.log('監聽到事件來自 update ，攜帶參數 msg 為：' + data.msg);
})uni.$off([eventName, callback])
移除全局自定義事件監聽器。
| 屬性 | 類型 | 描述 |
|---|---|---|
| eventName | Array＜String＞ | 事件名 |
| callback | Function | 事件的回調函數 |
Tips
- 如果沒有提供參數，則移除所有的事件監聽器；
- 如果只提供了事件，則移除該事件所有的監聽器；
- 如果同時提供了事件與回調，則只移除這個回調的監聽器；
- 提供的回調必須跟$on的回調為同一個才能移除這個回調的監聽器；
代碼示例
$emit、$on、$off常用于跨頁面、跨組件通訊，這里為了方便演示放在同一個頁面
<template>
<view class="content">
<view class="data">
<text>{{val}}</text>
</view>
<button type="primary" @click="comunicationOff">結束監聽</button>
</view>
</template>
<script>
export default {
data() {
return {
val: 0
}
},
onLoad() {
setInterval(()=>{
uni.$emit('add', {
data: 2
})
},1000)
uni.$on('add', this.add)
},
methods: {
comunicationOff() {
uni.$off('add', this.add)
},
add(e) {
this.val += e.data
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.data {
text-align: center;
line-height: 40px;
margin-top: 40px;
}
button {
width: 200px;
margin: 20px 0;
}
</style>注意事項
- uni.$emit、 uni.$on 、 uni.$once 、uni.$off 觸發的事件都是 App 全局級別的，跨任意組件，頁面，nvue，vue 等
- 使用時，注意及時銷毀事件監聽，比如，頁面 onLoad 里邊 uni.$on 注冊監聽，onUnload 里邊 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 監聽
示例代碼：
父頁面
<template>
<view class="whole_page">
<!--導航欄-->
<cu-custom bgColor="bg-blue" :isBack="true"><block slot="content">{{devInfo.adapterCode}}</block><block slot="right"><text class="mright_pt"></text></block></cu-custom>
<!--tab欄-->
<scroll-view scroll-x class="bg-white nav text-center" scroll-with-animation :scroll-left="scrollLeft">
<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
{{item}}
</view>
</scroll-view>
<!--頁面組件-->
<params v-if="tabs.length-TabCur>3" :tabcur='TabCur'></params>
<charts v-if="tabs.length-TabCur===3"></charts>
<configure v-if="tabs.length-TabCur===2"></configure>
<basic-info v-if="tabs.length-TabCur===1"></basic-info>
</view>
</template>
<script>
import params from './params/params.vue'
import charts from './charts/charts.vue'
import configure from './configure/configure.vue'
import basicInfo from './basicinfo/basicinfo.vue'
export default {
components:{
params,
charts,
configure,
basicInfo
},
data() {
return {
cmuid: '',
devInfo: {},
tabs: ['參數1','參數2','參數3','信息'],
//tab欄
TabCur: 0,
scrollLeft: 0,
devRtmDatasTimer: null,
isPageShow: true,
rtmData: {},
tagParams: {}
}
},
onLoad(option) {
//獲取傳遞的參數
this.devInfo = JSON.parse(decodeURIComponent(option.item));
//獲取cmuid
this.cmuid = uni.getStorageSync('cmuid');
//獲取tag和參數
this.getTagAndParams();
//獲取參數實時數據
this.getDeviceRtmDatas();
//定時獲取實時數據
this.setDeviceRtmDatasTimer();
},
onShow() {
this.isPageShow = true;
},
onHide() {
this.isPageShow = false;
},
onUnload(){
//清除定時器
clearInterval(this.devRtmDatasTimer);
//移除全局自定義事件監聽器
//uni.$off('paramsUpdate', null);
},
methods: {
/*tab欄*/
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 80;
//觸發事件
this.triggerEvent();
},
/*獲取tag和參數*/
getTagAndParams(){
let tagParam = {
'cmuid': this.cmuid,
'typeId': this.devInfo.type
}
this.api.tagAndParams(tagParam).then(res=>{
if(res.data.msgCode && res.data.msgCode == "0"){
//處理tag和參數數據
this.handleTagsAndParamsData(res.data.data);
}else{
this.api.showComToast(res.data.message);
}
})
},
/*處理tag和參數數據*/
handleTagsAndParamsData(data){
//處理tag數據，顯示tag標簽
if(data.hasOwnProperty('paramTagList') && data.paramTagList){
this.tabs = [...data.paramTagList, ...this.tabs];
}
//存儲數據
if(data){
this.tagParams = data;
}
},
/*獲取參數實時數據*/
getDeviceRtmDatas(){
let rtmDatas = {
'cmuid': this.cmuid,
'adaptorCode': this.devInfo.adapterCode
}
this.api.deviceRtmDatas(rtmDatas).then(res=>{
if(res.data.msgCode && res.data.msgCode == "0"){
//處理參數實時數據
this.handleDeviceRtmDatas(res.data.data)
}else{
this.api.showComToast(res.data.message);
}
})
},
/*處理參數實時數據*/
handleDeviceRtmDatas(data){
//在線離線
if(data.hasOwnProperty('enabled') && data.enabled == '1'){
this.devInfo.runStatus = 1;
if(data.hasOwnProperty('C485on') && data.C485on == '1'){
this.devInfo.C485on = 1;
}else{
this.devInfo.C485on = 0;
}
}else{
this.devInfo.runStatus = 0;
this.devInfo.C485on = 0;
}
//存儲數據
if(data){
this.rtmData = data;
}
//觸發事件
this.triggerEvent();
},
/*定時獲取實時數據*/
setDeviceRtmDatasTimer(){
this.devRtmDatasTimer = setInterval(()=>{
if(!this.isPageShow){
return;
}
this.getDeviceRtmDatas();
}, 3*1000);
},
/*觸發全局事件*/
triggerEvent(){
uni.$emit("paramsUpdate", this.$data);
}
}
}
</script>
<style lang="scss">
</style>
params組件
<template>
<view class="content">
<!--監控參數組件-->
<scroll-view scroll-y class="scroll_pt">
<view class="cnt_pt">
<view class="title_pt">
<view class="t_flag"></view>
<view class="t_text">數據信息</view>
</view>
<view v-for="(item,index) in dataList" :key="index">
<view class="item_pt">
<view class="left_pt">{{item.paramName}}</view>
<view class="right_pt">{{item.cvalue}}{{item.unit}}</view>
</view>
</view>
</view>
<view class="cnt_pt">
<view class="title_pt">
<view class="t_flag"></view>
<view class="t_text">指令控制</view>
</view>
<view class="btns_pt">
<view v-for="(item,index) in btnsList" :key="index">
<view @click="sendCmd(item)" class="btns" :style="[{'background-color':item.ccolor}]">{{item.paramName}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
datas: null,
colors: ['#007aff', '#ff0000', '#00ff00', '#ffff00', '#00ffff', '#ff00ff']
}
},
props: {
tabcur: {
type: Number,
default: ''
}
},
computed: {
//數據列表
dataList(){
let res = [];
if(this.datas){
let currTab = this.datas.tabs[this.datas.TabCur];
let paramlist = this.datas.tagParams.paramsList;
for (let i = 0; i < paramlist.length; i++) {
let paramsitem = paramlist[i];
if(paramsitem.paramTag == '' && currTab == '參數1'){
let v = this.getRunParamValue(paramsitem);
paramsitem.cvalue = v;
res.push(paramsitem);
}
if(paramsitem.paramTag != '' && paramsitem.paramTag.indexOf(currTab) >= 0){
let v = this.getRunParamValue(paramsitem);
paramsitem.cvalue = v;
res.push(paramsitem);
}
}
}
return res;
},
//btn列表
btnsList(){
let res = [];
if(this.datas){
let colorindex = 0;
let currTab = this.datas.tabs[this.datas.TabCur];
let btnlist = this.datas.tagParams.buttonList;
for (let i = 0; i < btnlist.length; i++) {
let btnitem = btnlist[i];
if(btnitem.paramTag == '' && currTab == '參數1'){
btnitem.ccolor = this.colors[colorindex++ % this.colors.length];
res.push(btnitem);
}
if(btnitem.paramTag != '' && btnitem.paramTag.indexOf(currTab) >= 0){
btnitem.ccolor = this.colors[colorindex++ % this.colors.length];
res.push(btnitem);
}
}
}
return res;
}
},
mounted() {
//獲取傳遞的參數
console.log(this.tabcur)
//監聽全局事件
this.setOnUpdateListener();
},
beforeDestroy() {
this.setOffUpdateListener();
},
methods: {
getRunParamValue(paramsitem){
let runData = this.datas.rtmData;
let cvalue = '';
//判斷雙地址，單地址
if(paramsitem.paramKey.indexOf(':') >= 0){//雙地址
let idstr = paramsitem.paramKey;//地址列表
let ftitle = paramsitem.operationRule;//操作規則
let addrs = idstr.split(":");
if(addrs.length == 2){
let v0 = runData["C"+addrs[0]];
let v1 = runData["C"+addrs[1]];
if(v0 && v1){
let intV0 = parseInt(v0);
let intV1 = parseInt(v1);
if(paramsitem.floatPoint && paramsitem.floatPoint == 1){
//雙字節浮點數
let intr = intV0 * 65536 + intV1;
//符號位
let sign = (intr & 0x80000000) ? -1 : 1;
//指數位
let exponent = ((intr >> 23) & 0xff) - 127;
//尾數位
let mantissa = 1 + ((intr & 0x7fffff) / 0x7fffff);
//保留小數
let desv = (sign * mantissa * Math.pow(2, exponent)) + '';
if(desv.indexOf(".") == -1){
cvalue = desv;
}else{
cvalue = desv.substring(0, desv.indexOf(".")+3);
}
}else{
let numPoint = 0;//小數點位數
if(ftitle.indexOf("0.000") > -1){
numPoint = 4;
}else if(ftitle.indexOf("0.00") > -1){
numPoint = 3;
}else if(ftitle.indexOf("0.0") > -1){
numPoint = 2;
}else if(ftitle.indexOf("0.") > -1){
numPoint = 1;
}
if(ftitle == ''){
cvalue = intV0 * 65536 + intV1;
}else{
cvalue = eval(ftitle.replace("?",intV0).replace("$",intV1)).toFixed(numPoint);
}
}
}
}
}else{
//判斷值是否存在
let pvalue = runData['C'+paramsitem.paramKey];
if(pvalue){
let kvalue = parseInt(pvalue);
//計算參數值，判斷是否是有符號數
let isSigned = paramsitem.isSigned;
if(isSigned == 1){//負數范圍(-32768---32767)
if(kvalue>32767){
kvalue=kvalue-65536;//65535對應-1
}
}
//判斷操作規則
if(paramsitem.operationRule == ''){
cvalue = kvalue;
}else{
//判斷小數點位數
let numPoint = 0;
if(paramsitem.operationRule.indexOf("0.000") > -1){
numPoint = 4;
}else if(paramsitem.operationRule.indexOf("0.00") > -1){
numPoint = 3;
}else if(paramsitem.operationRule.indexOf("0.0") > -1){
numPoint = 2;
}else if(paramsitem.operationRule.indexOf("0.") > -1){
numPoint = 1;
}
//計算運算規則
cvalue = eval(paramsitem.operationRule.replace("?",kvalue)).toFixed(numPoint);
}
}else{
cvalue = '';
}
}
return cvalue;
},
/*下發指令*/
sendCmd(btninfo){
let cmdparam = {
'adaptorCode': this.datas.devInfo.adapterCode,
'address': btninfo.paramKey,
'value': btninfo.paramVal,
'deviceId': this.datas.devInfo.id,
'commandDesc': btninfo.paramName,
'phonePlatFrom': '2',
'floatMark': btninfo.floatPoint
}
this.api.sendCommand(cmdparam).then(res=>{
console.log(res)
})
},
/*監聽全局事件*/
setOnUpdateListener(){
uni.$on('paramsUpdate', (data)=>{
this.datas = data;
})
},
/*移除全局自定義事件監聽器*/
setOffUpdateListener(){
uni.$off('paramsUpdate', null);
}
}
}
</script>
<style lang="scss">
.content{
width: 100%;
height: calc(100vh - var(--status-bar-height) - 45px - 37px - 40px - 3px);
padding: 0rpx 10rpx;
}
.scroll_pt{
height: 100%;
padding: 10rpx 0rpx 0rpx;
.cnt_pt{
background-color: #FFFFFF;
border-radius: 15rpx;
padding: 15rpx 15rpx 30rpx;
margin-bottom: 10rpx;
.title_pt{
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 20rpx 0rpx;
border-bottom: 1rpx solid #EFEFEF;
.t_flag{
width: 8rpx;
height: 25rpx;
border-radius: 15rpx;
background-color: $uni-color-primary;
}
.t_text{
font-size: 32rpx;
margin-left: 10rpx;
}
}
.item_pt{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid #EFEFEF;
padding: 20rpx 0rpx;
.left_pt{
}
.right_pt{
color: $uni-color-primary;
}
}
.btns_pt{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10rpx;
.btns{
width: 325rpx;
padding: 15rpx 0rpx;
margin: 15rpx 0rpx;
color: #FFFFFF;
text-align: center;
border-radius: 15rpx;
}
}
}
}
</style>
basicinfo組件
<template>
<view class="content">
<!--基本信息組件-->
<scroll-view scroll-y class="scroll_pt">
<view class="cnt_pt">
<view class="title_pt">
<view class="t_flag"></view>
<view class="t_text">基本信息</view>
</view>
<view v-for="(item,index) in datas" :key="index">
<view class="item_pt">
<view class="left_pt">{{item.key}}</view>
<view class="right_pt">{{item.value}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
datas:[{'key':'dsafdsa', 'value':'0612345678'},
{'key':'dsafdsa', 'value':'345678'},
{'key':'dsafdsa', 'value':'5678'},
{'key':'dsafdsa', 'value':'612345678'}]
}
},
mounted() {
//監聽全局事件
//this.setOnUpdateListener();
//監聽一次全局事件
this.setOnceUpdateListener();
},
beforeDestroy() {
//this.setOffUpdateListener();
},
methods: {
/*只監聽一次全局事件，然后移除*/
setOnceUpdateListener(){
uni.$once('paramsUpdate',(data)=>{
})
},
/*監聽全局事件*/
setOnUpdateListener(){
uni.$on('paramsUpdate', (data)=>{
this.datas = data;
})
},
/*移除全局自定義事件監聽器*/
setOffUpdateListener(){
uni.$off('paramsUpdate', null);
}
}
}
</script>
<style lang="scss">
.content{
width: 100%;
height: calc(100vh - var(--status-bar-height) - 45px - 37px - 40px - 3px);
padding: 0rpx 10rpx;
}
.scroll_pt{
height: 100%;
padding: 10rpx 0rpx 0rpx;
.cnt_pt{
background-color: #FFFFFF;
border-radius: 15rpx;
padding: 15rpx 15rpx 30rpx;
margin-bottom: 10rpx;
.title_pt{
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 20rpx 0rpx;
border-bottom: 1rpx solid #EFEFEF;
.t_flag{
width: 8rpx;
height: 25rpx;
border-radius: 15rpx;
background-color: $uni-color-primary;
}
.t_text{
font-size: 32rpx;
margin-left: 10rpx;
}
}
.item_pt{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid #EFEFEF;
padding: 20rpx 0rpx;
.left_pt{
}
.right_pt{
color: $uni-color-primary;
}
}
}
}
</style>
完?。?！
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
原文鏈接：https://ly9527.blog.csdn.net/article/details/115723229
- 上一篇：沒有了
- 下一篇：沒有了
相關推薦
- 2022-04-11 C++中為什么要使用動態內存_C 語言
- 2022-02-10 MongoDB數據庫安裝部署及警告優化_MongoDB
- 2022-10-10 pandas?修改列名的實現示例_python
- 2022-10-15 Golang官方限流器庫實現限流示例詳解_Golang
- 2022-04-19 jQuery下實現等待指定元素加載完畢
- 2022-06-20 基于python?的Pygame最小開發框架_python
- 2023-08-28 axios的使用和接口請求統一封裝處理
- 2022-08-10 Qt利用DOM類實現讀取xml文件_C 語言
- 欄目分類
-
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速