刚开始用uniapp,使用uni.$emit和this.$Router.push跳转传参。
有点懵,百度查完一起记录一下(参考好多就不单独放参考链接了)。
一、this.$router三种跳转方式: | |
(1)this.$router.push //向 history 栈中添加一个记录,点击后退会返回到上一个页面 (2)this.$router.replace //不向 history 栈中记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面) (3)this.$router.go(n) // 向前或者向后跳转n个页面,n可为正整数或负整数 | |
二、query和params两种传参方式: | |
query方式:通过name或path来引入路由。 (1)传参: this.$router.push({path:'/register',query:{id:0001}}) 或者 this.$router.push({path:'/register',query:{id:0001}}) (2)接参: this.$route.query.id | params方式:只能通过name来引入路由, path会undefined。 (1)传参: this.$router.push({name:'register',params:{id:0001}}) (2)接参: this.$route.params.id |
三、uni四个事件 | |
(1)uni.$emit uni.$emit(需要通知的事件名称,OBJECT) 触发全局的自定义事件。附加参数都会传给监听器回调。 (2)uni.$on(事件名称,callback) 监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。 (3)uni.$once(事件名称,callback) 监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器。 (4)uni.$off([eventName, callback]) 移除全局自定义事件监听器。 如果没有提供参数,则移除所有的事件监听器; 如果只提供了事件,则移除该事件所有的监听器; 如果同时提供了事件与回调,则只移除这个回调的监听器; 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器; | |
四、使用记录: (没明白this.$Router.push和uni.$emit一起使用传参是否重复???) | |
(1)传参页面: this.$Router.push({ name: 'workOrderPool-lg', params: val});//跳转页面路由workOrderPool-lg uni.$emit('lgForm', val);//定义触发全局事件lgForm,接参页面需要监听该事件 (2)接参页面: onLoad() { this.records = this.$Route.query; //直接赋值给变量,grid表单直接读取{{ this.records.id}} //或 this.$set(this, 'form', this.$Route.query); }, mounted: function() { uni.$on('pgForm', res => {//开启监听,监听事件pgForm this.records = res; //接参赋值 //或 this.$set(this, 'form', res);//给form表单赋值 uni.$off('pgForm', () => { console.log('关闭监听'); }); }); }, |