uniapp全局监听，页面修改页面 uni.$emit(),uni.on(),uni.off()

向右看齐 2022-09-02 04:18 543阅读 0赞

### 1.全局监听，页面修改页面 uni.$emit(),uni.on(),uni.off() ###

#### 任一页面 ####

<template>
        <view>
            <text>我是任一页面</text>
            <button type="warn" @click="globleEvent">全局事件订阅</button>
        </view>
    </template>
    
    <script>
        export default { 
            methods:{ 
                globleEvent(){ 
                    //全局事件订阅只要注册的页面都可以收到回调值
                    uni.$emit("globleEvent","我是全局事件订阅的调用方法")
                }           
            }
        }
    </script>

#### 任二页面 ####

<template>
        <view>
           <view>{ { title}}</view>
          <view>{ { content}}</view>
        </view>
    </template>
    
    <script>
        export default { 
            data() { 
                return { 
                    title:'任二页面初始状态',
                    content:"此页面初始内容"
                };
            },
            onLoad() { 
            	//结束上一次监听
            	uni.$off();
                //全局事件订阅，只要订阅了事件就可以收到值
                uni.$on("globleEvent",async (res)=>{ 
                	console.log(res);//我是全局事件订阅的调用方法
                	tihs.content = res;
                   this.update()
                })
            },
            methods:{ 
                async update(res){ 
                  //此时可以进行你的主页面的操作，调用某个方法等等
                    this.title="被任一页面修改后的"
                }
            }
        }
    </script>

### 2.子组件分发事件this. e m i t ( ) , t h i s . emit(),this. emit(),this.on() ###

#### 组件 ####

<template>
        <view>
            <text>我是test组件{ { title}}</text>
            <button type="primary" @click="test">按钮传值回调</button>
             <button type="primary" @click="distribute">分发事件</button>
        </view>
    </template>
    
    <script>
        export default { 
            data() { 
                return {                 
                };
            },
            props:{ 
                title:'',
                
            },
            methods:{ 
                test(){ 
                    console.log("组件中的按钮点击事件")
                    //触发子视图中的该事件方法
                    this.$emit("testShowName",{ name:"lele"})
                }, 
                distribute(){ 
                	this.$emit("my_events")
    			}
            }
        }
    </script>

#### 整个流程 ####

//使用test.vue组件  
①首先要import导入组件  
② components :\{test\} 注册组件  
③组件使用的时候,可以自定义很多的属性,具体值设置在组件中的props属性对象中  
④点击按钮触发方法逻辑流程如下  
1)@click=“test” 组件中触发该方法时间  
2)事件方法中触发, 使用该组件自定义的方法this.$emit(“testShowName”,\{name:“lele”\}), 去页面中查找该绑定方法,里面有对应的绑定事件  
3)接着会触发@testShowName="testEvent"中的testEvent方法  
4)紧接着就可以完成整个事件的流程了  
testEvent(rel)\{  
console.log(rel)  
\}

#### 父页面 ####

<template>
        <view>
            <view style="height: 200rpx;">
                <test 
                    :title="title"
                    @testShowName="testEvent"
                ></test>
            </view>
        </view>
    </template>
    
    <script>
        import test from "@/components/test/test.vue" //引入组建
        export default { 
         components:{   
                test  //注册组建
            },
            data() { 
                return { 
                    title:'lele'
                };
            },
            created() { 
    			this.$on('my_events', this.handleEvents)
    		},
            methods:{ 
                testEvent(rel){ 
                  //此时可以进行你的主页面的操作，调用某个方法等等
                    console.log(rel)
                },
                handleEvents(){ 
                  //此时可以进行你的主页面的操作，调用某个方法等等
                }
            }
        }
    </script>

[https://www.jianshu.com/p/9fcdba7638be][https_www.jianshu.com_p_9fcdba7638be]

[https_www.jianshu.com_p_9fcdba7638be]: https://www.jianshu.com/p/9fcdba7638be