Vue3引入了EventChannel的概念,它允许组件之间进行异步通信。下面,我们将详细介绍如何在uni-app中使用EventChannel实现页面间的通信。一、创建EventChannel 首先,你需要在需要通信的两个页面之间创建一个EventChannel。在uni-app中,可以通过uni.createEventChannel()方法创建EventChannel实例。// 在页面A中创建EventChannel const...
uniapp 页面跳转传值(eventChannel) 在A -> B页面时,如果想要将A页面中的数据传给B,可以使用eventChannel方法或者用url拼接,在这里先说明第一种eventChannel方法如何实现。 A页面: 首先定义了一个点击事件handleItemClick,触发点击事件后再传递数据 data() {return{ itemData:'123'} } methods: { handleItemClick(...
// 通过eventChannel向被打开页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' }) } }); } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 详情页面: onLoad(option) { const eventChannel = this.getOpenerEventChannel(); // 监听acceptDataFromOpene...
使用uni.navigateTo() 传递参数比较麻烦,官网中提到的两个传递方法,一个是拼接在 url 中,一个使用 eventChannel 向被打开页面传送数据。 因为传递的数据是一个对象,第一个方法使用拼接传输不实用,第二个方法需要用到 this,但是项目使用的是 vue3 的,没有this。 查到网友说可以vue中引入getCurrentInstance。 然后使...
eventChannel.emit("acceptDataFromOpenerPage", { data: '通过事件通道返回时传递数据' }) 1. 2. 3. 4. 如上代码,我们在点击按钮的时候,获取事件通道,然后通过 emit 方法来传递数据,这个方法接收两个参数,第一个参数是一个字符串,这个字符串是我们在接收数据的页面中定义的(两边要一致,自己定义),第二个参...
eventChannel EventChannel 和被打开页面进行通信 示例 //在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url: 'test?id=1&name=uniapp' }); // 在test.vue页面接受参数 export default { onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数 console.log(option.id); ...
eventChannel.on('acceptDataFromOpenerPage', function(data) { console.log(data) }) } } 如上代码,我们在 onLoad 生命周期中通过 this.getOpenerEventChannel() 方法来获取到事件通道,然后通过 eventChannel.on 方法来接收数据,这个方法接收两个参数,第一个参数是我们在跳转页面中定义的字符串,第二个参数是一个...
页面通讯通常涉及数据的发送和接收。在uniapp中,这可以通过多种方式实现,包括但不限于URL参数传递、本地存储、事件通道(EventChannel)、全局事件总线(EventBus)、Vuex状态管理等。 2. 常用方法 URL参数传递:适用于简单数据的传递,通过URL的查询参数实现。 本地存储:利用uniapp提供的uni.setStorageSync和uni.getStorage...
eventChannel.emit("acceptDataFromOpenerPage", { data: '通过事件通道返回时传递数据' }) } 如上代码就是我们之前的逆着传递数据的代码,改动的点就是之前是 this.getOpenerEventChannel(); 现在是 $instance.value.getOpenerEventChannel();,然后我们在首页当中接收数据,代码如下: 代码语言:html...
eventChannel.emit('changeCommentsCount', {data: _datas}); } } } 当ange-comments增加评论或者删除时都会调用comments.vue中的changeCommentsCount方法,以删除为例。 # agne-comments.vue _delete(comment, callback) { let that = this // DELETE...