创建一个全新的项目(先来看 Vue2 版本的,所以在创建项目的时候选择 Vue2):
然后在配置一下,微信小程序的 AppId,直接去之前的项目中拷贝一下即可,找到之前项目的 manifest.json
文件,然后选择微信小程序配置,复制一下即可。
uni.$emit
的方式来传递数据,然后在 index 页面中通过 uni.$on
来接收数据uni.$on
来接收数据之外,还需要在 onUnload
生命周期函数中通过 uni.$off
来取消监听one 页面:
<template>
<view>
<text>one页面</text>
<button type="primary" @click="onGoBackClick">返回到上一页</button>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
onGoBackClick() {
uni.navigateBack({
delta: 1
});
// 通过 $emit 传递数据
uni.$emit("test", {
data: "通过$emit直接传递数据"
})
}
}
}
</script>
index 页面:
<template>
<view>
<button @click="onJumpOne">navigateTo</button>
</view>
</template>
<script>
export default {
methods: {
onJumpOne() {
uni.navigateTo({
url: '/pages/one/one'
})
}
},
onLoad() {
uni.$on("test", (data) => {
console.log(data)
})
},
onUnload() {
uni.$off("test")
}
}
</script>
setup
函数中进行编写one 页面:
<template>
<view>
<text>one</text>
<text>=======================</text>
<button type="default" @click="onGoBackClick">返回上一个界面</button>
</view>
</template>
<script setup>
function onGoBackClick() {
uni.navigateBack({
delta: 1
});
// 通过 $emit 传递数据
uni.$emit("test", {
data: "通过$emit直接传递数据"
})
}
</script>
index 页面:
<template>
<view>
<button type="primary" @click="onJumpOne">跳转到One界面</button>
</view>
</template>
<script setup>
import {
onLoad,
onUnload
} from '@dcloudio/uni-app'
function onJumpOne() {
uni.navigateTo({
url: '/pages/one/one'
})
}
onLoad(() => {
uni.$on("test", (data) => {
console.log(data)
})
})
onUnload(() => {
uni.$off("test")
})
</script>
uni.$emit
传递数据,然后通过 uni.$on
来接收数据(有一个注意点,就是 uni.$on
注册的事件一定要在页面卸载的时候通过 uni.$off
注销掉)如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等,可点击“私信”按钮向作者进行反馈;如作者无回复可进行平台仲裁,我们会在第一时间进行处理!
加入交流群
请使用微信扫一扫!