【Uniapp-Vue3】使用uni.$emit和$on页面通讯实现发布成功即时更新数据

Uniapp-Vue3实现页面间即时数据更新
最新推荐文章于 2025-09-11 16:49:39 发布
原创 最新推荐文章于 2025-09-11 16:49:39 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #vue.js #前端

我们有一个页面A，我们在A中可以上传一条数据，但是数据在页面B进行展示。

想要实现A中上传数据后页面B中立刻更新数据。

首先，在页面A中使用uni.$emit方法：

uni.$emit("事件名称", 发送数据);

在页面B中使用uni.$on方法：

uni.$on("事件名称", (e)=>{

        // 处理逻辑

})

 

uniapp 使用 $emit和$on——$on中无法为data中的变量赋值
weixin_48596030的博客
12-05 1794
问题在于this的指向，解决办法是使用变量保存$on，其次再为data中的值赋值。
uniapp [全端兼容] - 实现仿微信聊天发送位置信息功能，uni-app项目实现发送位置的地图交互效果示例，用户通过选择位置或搜索地点确定后，对方点击也可以查看位置及导航等（高德地图+百度地图）
🏆 前端领域优质创作者
04-05 7345
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，uniapp模仿微信实现发送位置消息，解决滚动页面地图层级冲突，uniapp有没有内置的类似于微信发送位置的组件，uniApp中实现微信式发送位置消息，uniApp高德地图，uniapp百度地图，uniapp如何实现位置信息的发送和展示，map地图组件，uni-app移动端仿微信发送位置的地图交互，UNI-APP仿微信发送位置功能，发送位置后对方可以查看和导航到该位置，获取当前定位，选择位置，搜索位置
uni.$emit和uni.$on用法；uni-app微信小程序页面通讯；微信小程序页面通讯
i_am_a_div的博客
10-13 3297
uni-app的官方api uni.$on 场景：微信小程序两个页面甚至多个页面之间，可能共用一个参数或者需要相互传递使用参数。例如页面A点击按钮，需要把A页面的item数据，赋值给页面B的formData，但是页面A只是传递数据给B，却不跳转到B。导致无法通过页面路径跳转传递参数，此时最好的办法就是使用页面通讯。 A页面：uni.$emit传递数据data methods:{ //获取数据 getData(){ let item={name:'张三',age:18} //
uniapp 页面通信uni.$emit、eventChannel
weixin_43294560的博客
11-05 7062
发送 uni.$emit('update',{msg:'页面更新'}) 监听 uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); }) 监听一次 uni.$once('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
关于uniApp组件通知uni.$emit $on
m178398家里有只小肥猫
09-11 130
【代码】关于uniApp组件通知uni.$emit $on。
【Uniapp-Vue3】组件中emit的声明触发事件
XunLin233的博客
01-11 1112
emit能够实现子组件向父组件传递数据。
uni-app学习笔记十四-vue3中emit的使用
shenxiaomo1688的博客
05-25 1159
在组件传值中，无论是props还是slot都是单向数据流，父组件向子组件传值，子组件不能直接对父组件传过来的值进行重新赋值。在父组件中，onAdd接收子组件传递过来的随机数并转化为字符串进行截取，得到一个颜色的随机数。通过@add="onAdd"，其中add就是子组件的函数名。在实际开发中，emit通常需要在JS部分进行处理，上面的。子组件设置传递过去的函数名为add，值为一个随机数。下面学习子组件向父组件传值的工具--emit。在子组件emit设置传递的函数名和值。可以实现一样的效果。
uni-app如何页面传参数的几种方法总结
10-15
以下是一个简单的例子，展示了如何正确使用`uni.$emit()`和`uni.$on()`进行页面间的通讯： 发送页面（`sender.vue`）： ```html 点击发射 import Vue from "vue"; export default { methods: { click() ...
uniapp MySQL vue ES6 jQuery 个人整合
weixin_64948861的博客
04-24 782
Uniapp 是一个使用 Vue.js 进行开发的跨平台应用开发框架，可以同时开发一套代码，直接编译出运行在 H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、APP 等多个平台的应用。在 Uniapp 项目开发中，需要用到以下语言和插件：1. 语言- HTML5：用于页面结构的构建。- CSS3：用于页面样式的编写。- JavaScript：用于页面交互和逻辑的编写。- Vue.js：用于组件化的开发。2. 插件。
入门级node+uni-app开发即时通讯聊天室（6）一对一用户聊天的实现（三）
q1025387665a的博客
02-06 985
前言： 这篇是核心实现，如果你感觉到某些地方的写法有些让你感觉到迷惑，请你暂时先忽略（我一开始也感觉十分困难），先把他做出来，不要太纠结于为什么，当然，我仍然会尽我的能力用代码和文字将他表示清楚。这是来自我自学的经验之谈，当你实在难以理解，先放下它。此篇将会介绍socket.io的使用，最主要的是要搞明白客户端与服务器端之间的数据流动，假如你对数据的流动完全清晰可见，这个篇章也许对你不是难题。即时通讯是基于socket.io的，毫无疑问。 首先我们先介绍socket.io，它是由WebSocket封装而来的
uniapp｜实现多终端视频弹幕组件、内容轮询、信息表情发送(自定义全屏半屏切换、弹幕启用)
热门推荐
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
05-08 1万+
基于UniApp框架实现跨终端视频弹幕组件的开发，结合CSS3动画与setInterval轮询机制，完成弹幕从右向左的动态滚动效果，针对交互需求，设计弹幕启用开关、全屏/半屏模式切换功能，并利用cover-view组件解决原生层级覆盖问题。
uniapp中$emit的使用方法
Vae2437426397的博客
03-25 3086
uniapp中 $emit的使用方法
uniapp全局传参 uni.$on uni.$emit(‘updateBack‘
qq_42351675的博客
12-10 1130
【代码】uniapp全局传参 uni.$on uni.$emit(‘updateBack‘
uniapp 使用uni.$emit()和uni.$on() 进行页面间通讯
qq_37496470的博客
12-21 2809
uni.$emit("name", data); uni.navigateBack(); uni.$on("name", res => { // 清除监听 uni.$off('name'); })
uniapp+vue3，Vue3去掉了this.$on、this.$emit功能，用其他两种方法实现App.vue微信小程序登陆（vue3选项式）
MarchS的博客
11-25 706
3、在app.vue中登陆，配置数据完成后，that.$event.$emit("login");1、因为vue3取消$emit\$on,所以单独编写一个。4、在每个vue页面进去的时候$on。2、在main.js中引入。
vue3使用emit(用法一：组件传值(传方法)；用法二：做触发器)------写在setup(){}方法里面的
weixin_45458830的博客
11-27 9299
2、子组件里用$emit向父组件触发一个事件(setup语法糖，setup直接写在script标签上)1、父组件中把方法作为属性传入子组件，在子组件里直接调用这个方法(写在setup()方法里)vue3子组件调父组件的方法(就是用props把父方法传给子，即父传子，只不过传的是方法)
Vue 3 中的 $emit 函数是如何工作的
weixin_47772925的博客
03-03 8464
在 Vue.js 框架中，组件间的通信是一个核心概念。Vue 提供了多种方式来实现父子组件间的通信，其中$emit是子组件向父组件发送消息的一种常用手段。在 Vue 3 中，随着 Composition API 的引入，$emit的使用方式也发生了一些变化，但其核心原理仍然保持不变。
『uni-app』事件传值『this.$emit』『uni.$emit』
ReturnTmp的博客
09-16 5648
只要在想要传值的页面onload方法中注册订阅事件,在需要传值的页面传值就可以收到回调。与之相对的当父组件需要调用子组件时则使用this.$refs的方法。用于当子组件需要调用父组件的方法的场景下使用。格式：this.$emit('事件',参数)uni.$emit 这个是全局的事件订阅。my-search.vue组件。触发全局订阅事件的方法。
uniapp中使用uni.$emit和uni.$on在vue和nvue页面之间传值但是无法赋值的问题
m0_60817860的博客
09-11 1278
背景：我们在vue页面和nvue页面之间进行传值可以使用uni.$emit和uni.$onsh事件监听实现，官网描述：uni-app官网 (dcloud.net.cn)
uniapp在启动的时候在app.vue中判断用户是否登录，如果没有登录就跳转到login.vue，否则就跳转到index.vue，但是判断没有登录，跳转到login.vue之前，index.vue已经显示出来了，之后才跳转到login.vue，请问，这个怎么办
最新发布
12-12
使用`uni.$emit`（替代Vue3移除的`this.$on`）通知所有页面更新登录态[^3]： ```javascript // 在页面中监听 import { onMounted } from 'vue' onMounted(() => { uni.$on('loginStateChange', (isLogin) => {...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值