uni-app实现页面通信EventChannel的操作方法

 更新时间:2024年05月31日 10:58:04   作者:幸福了,然后呢  
使用了EventBus的方法实现不同页面组件之间的一个通信,在uni-app中,我们也可以使用uni-app API,uni.navigateTo来实现页面间的通信,这篇文章主要介绍了uni-app实现页面通信EventChannel的操作方法,需要的朋友可以参考下

uni-app实现页面通信EventChannel

之前使用了EventBus的方法实现不同页面组件之间的一个通信,在uni-app中,我们也可以使用uni-app API —— uni.navigateTo来实现页面间的通信。注:2.8.9+ 支持页面间事件通信通道。

1. 向被打开页面传送数据

// index.vue
<script setup>
	uni.navigateTo({
		url: '/pages/tender/detail', // 跳转详情页面
	    success:function(res){
	      // 通过eventChannel向被打开页面传送数据
	      res.eventChannel.emit('toDetailEmits', { data: 'index to detail' })
	    }
	});
</script>
// detail.vue
import { onLoad } from '@dcloudio/uni-app';
import { ref, getCurrentInstance} from 'vue';
const instance = getCurrentInstance().proxy
<script setup>
	onLoad(()=>{
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('toDetailEmits',(data)=>{
		  console.log(data,'data') // 输出结果如下
		})
	})
</script>

2. 如果需要获取被打开页面传送到当前页面的数据

// index.vue
<script setup>
	uni.navigateTo({
		url: '/pages/tender/detail', // 跳转详情页面
	    events:{
	      // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
	      updataEmits:function(data){
	        console.log(data,'data index')  // 输出结果如下
	        // 可以在当前页做一些操作....
	      }
	    },
	    success:function(res){
	      // 通过eventChannel向被打开页面传送数据
	      res.eventChannel.emit('toDetailEmits', { data: 'index to detail' })
	    }
	});
</script>
// detail.vue
import { onLoad } from '@dcloudio/uni-app';
import { ref, getCurrentInstance} from 'vue';
const instance = getCurrentInstance().proxy
<script setup>
	// 如点击某一按钮
	const cancle = () => {
		const eventChannel = instance.getOpenerEventChannel();
	    eventChannel.emit('updataEmits',{data:'detail to index'})
	    uni.navigateBack()
	}
	onLoad(()=>{
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('toDetailEmits',(data)=>{
		  console.log(data,'data') 
		})
	})
</script>

到此这篇关于uni-app实现页面通信EventChannel的操作方法的文章就介绍到这了,更多相关uni-app页面通信EventChannel内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • three.js中正交与透视投影相机的实战应用指南

    three.js中正交与透视投影相机的实战应用指南

    在three.js中摄像机的作用就是不断的拍摄我们创建好的场景,然后通过渲染器渲染到屏幕中,下面这篇文章主要给大家介绍了关于three.js中正交与透视投影相机应用的相关资料,需要的朋友可以参考下
    2022-08-08
  • 更快的异步执行(setTimeout多浏览器)

    更快的异步执行(setTimeout多浏览器)

    如果要异步执行一个函数,我们最先想到的方法肯定会是setTimeout,这里简单介绍下,方便需要的朋友
    2014-08-08
  • javascript attachEvent和addEventListener使用方法

    javascript attachEvent和addEventListener使用方法

    attachEvent与addEventListener区别 适应的浏览器版本不同,同时在使用的过程中要注意
    2009-03-03
  • 基于JavaScript实现简单的轮播图

    基于JavaScript实现简单的轮播图

    这篇文章主要为大家详细介绍了基于JavaScript实现简单的轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • ES6知识点整理之对象解构赋值应用示例

    ES6知识点整理之对象解构赋值应用示例

    这篇文章主要介绍了ES6知识点整理之对象解构赋值应用,结合实例形式分析了ES6对象解构赋值相关概念、原理、出现的问题及相应解决方法,需要的朋友可以参考下
    2019-04-04
  • JavaScript写的一个DIV 弹出网页对话框

    JavaScript写的一个DIV 弹出网页对话框

    自己整理得一个JavaScript写的一个DIV 弹出网页对话框
    2009-08-08
  • 微信小程序后端实现授权登录

    微信小程序后端实现授权登录

    这篇文章主要介绍了微信小程序后端实现授权登录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaScript设计模式组合设计模式案例

    JavaScript设计模式组合设计模式案例

    这篇文章主要介绍了JavaScript设计模式组合设计模式案例,组合设计模式是用于将多个部分通过组合的方式行成一个整体,更多相关内容需要的小伙伴可以参考一下
    2022-06-06
  • JS随机打乱数组的方法小结

    JS随机打乱数组的方法小结

    这篇文章主要介绍了JS随机打乱数组的方法,结合实例总结分析了几种常用的数组打乱顺序并重新进行排序的技巧,非常简单实用,需要的朋友可以参考下
    2016-06-06
  • JavaScript中this绑定规则你理解了吗

    JavaScript中this绑定规则你理解了吗

    JavaScript中的this是一个非常重要的概念,也是一个令新手开发者甚至有些不深入理解的多年经验开发者都会感到困惑的概念,如果你希望自己能够使用this编写更好的代码或者更好理解他人的代码,就跟随小编一起理解一下this吧
    2023-07-07

最新评论