• uni-app页面回跳传参


    实现场景

    A页面跳转到B页面,然后把参数返回给A页面

    官方API

      uni.navigateTo({
      url: 'pages/test?id=1',
      events: {
        // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function(data) {
          console.log(data)
        },
        someEvent: function(data) {
          console.log(data)
        }
        ...
      },
      success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
      }
    })
    
    // uni.navigateTo 目标页面 pages/test.vue
    onLoad: function(option) {
      console.log(option.query)
      // #ifdef APP-NVUE
      const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
      // #endif
      // #ifndef APP-NVUE
      const eventChannel = this.getOpenerEventChannel();
      // #endif
      eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
      eventChannel.emit('someEvent', {data: 'test'});
      // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
      eventChannel.on('acceptDataFromOpenerPage', function(data) {
        console.log(data)
      })
    }
    

    实例

    A页面

    <view @click="toAdd">跳转</view>
    
        methods: {
    	toAdd(){
    		uni.navigateTo({
    		url: '/index/index', //B页面路由
    		events: {
    			// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    			acceptDataFromOpenedPage: function(data) {
    			console.log(data,'acceptDataFromOpenedPage')
    		},
    		someEvent: function(data) {
    		console.log(data,'someEvent')
    		}
    	},
    	success: function(res) {
    		// 通过eventChannel向被打开页面传送数据
    		// res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
    		}
    	})
    ,
    

    B页面

    <view @click="toAddB(id)">跳转</view>
    
    methods: {
    	nav(id){
    		const eventChannel = this.getOpenerEventChannel();
    		console.log(eventChannel,'eventChannel ')
    		eventChannel.emit('acceptDataFromOpenedPage', {data: id});
    		eventChannel.emit('someEvent', {data: id});
    		uni.navigateBack({
    			
    		})
    	}
    }
    
  • 相关阅读:
    SSM整合初级 简单的增删改查
    初始SpringMVC
    初始Spring MVC
    Web Service简介
    Quartz框架 实现任务调度
    搭建james邮件服务器
    使用Jdbc Template的基本操作步骤
    spring AOP四种实现方式
    Struts2数据校验
    Struts2 与Servlet API解耦,耦合的访问方式
  • 原文地址:https://www.cnblogs.com/yx-liu/p/15357592.html
Copyright © 2020-2023  润新知