uniapp-使用uni.$emit和this.$Router.push跳转传参

刚开始用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('关闭监听');

        });

    });

},

你可能感兴趣的:(Vue,vue.js,前端,uni-app)