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

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.$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