A页面
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<br>
<button type="primary" size="mini" @click="gotopage">跳转到B</button>
<br>
<view>
<view class="title">{{title}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello A',
}
},
onLoad() {
console.log('A page onLoad')
// this.getData()
uni.$on('pushFromB', this.setData)
},
onUnload() {
uni.$off('pushFromB')
},
onShow() {
console.log('A page onshow')
},
methods: {
setData(data) {
console.log('监听到事件来自 B ,携带参数 data 为:' + JSON.stringify(data));
this.title = data
},
gotopage() {
console.log('跳转到B')
uni.navigateTo({
url: '/pages/b'
})
}
}
}
</script>
B页面
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<br>
<button type="primary" size="mini" @click="goto">跳转到C</button>
<br>
<button type="warn" size="mini" @click="pushData">返回A</button>
<view>
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello B'
}
},
onLoad() {
console.log('B page onLoad')
uni.$on('pushFromC', this.setData)
},
onUnload() {
uni.$off('pushFromC')
},
onShow() {
console.log('B page onshow')
},
methods: {
goto() {
console.log('跳转到C')
uni.navigateTo({
url: '/pages/c'
})
},
setData(data) {
console.log('监听到事件来自 C ,携带参数 data 为:' + JSON.stringify(data));
this.title = data
},
pushData() {
uni.$emit('pushFromB', 'Data from B')
this.back()
},
back(){
console.log('返回A')
uni.navigateBack({
delta: 1
});
}
}
}
</script>
C页面
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<br>
<button type="warn" size="mini" @click="pushData">返回B</button>
<br>
<view>
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello C'
}
},
onLoad() {
console.log('C page onload')
},
onShow() {
console.log('C page onshow')
},
methods: {
pushData() {
uni.$emit('pushFromC', 'Data from B')
this.back()
},
back(){
console.log('返回B')
uni.navigateBack({
delta: 1
});
}
}
}
</script>
pages.json
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/a",
"style": {
"navigationBarTitleText": "A页面"
}
},
{
"path": "pages/b",
"style": {
"navigationBarTitleText": "B页面"
}
},
{
"path": "pages/c",
"style": {
"navigationBarTitleText": "C页面"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}