uni-app 事件传值this.$emit和uni.$emit

//test.vue组件

<template>
    <view>
        <text>我是test组件{{title}}</text>
        <button type="primary" @click="test">按钮传值回调</button>
        <button type="warn" @click="globleEvent">全局事件订阅</button>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {                
            };
        },
        props:{
            title:'',
            
        },
        methods:{
            test(){
                console.log("组件中的按钮点击事件")
                //触发子视图中的该事件方法
                this.$emit("testShowName",{name:"lele"})
            },
            globleEvent(){
                //全局事件订阅只要注册的页面都可以收到回调值
                uni.$emit("globleEvent","我是全局事件订阅的传值")
            }           
        }
    }
</script>

<style lang="scss">

</style>

//使用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 class="father clearfix">
            
            <block class="" v-for="(item,index) in titleArr" :key="index">
                <view  class="childOne">
                    <image src="../../static/logo.png" mode="widthFix"></image>
                    <text style="align-items: center;">{{item}}</text>
                    
                </view>
            </block>

            
            
        </view>
        
        <view class="" style="height: 200rpx;">
            <test 
                :title="title"
                @testShowName="testEvent"
            ></test>
        </view>
        
        
    </view>
</template>

<script>
    import test from "@/components/test/test.vue" //引入组建
    export default {
        data() {
            return {
                titleArr:[
                    "1",
                    "2",
                    "3"
                ],
                title:'lele'
            };
        },
        onLoad() {
            //全局事件订阅，只要订阅了事件就可以收到值
            uni.$on("globleEvent",(rel)=>{
                console.log(rel)
            })
        },
        components:{  
            test  //注册组建
        },
        methods:{
            testEvent(rel){
                console.log(rel)
            }
        }
    }
</script>

<style lang="scss">
    *{
        margin: 0;
        padding: 0;
    }
    
    .clearfix:before,.clearfix:after{
        display: block;
        content: "";
    }
    .clearfix:after{
        clear: both;
    }
    
    .father{
        margin: 0rpx 20rpx 0rpx 20rpx;
    }
    
    .childOne{
        display: flex;
        float: left;
        height:200rpx;
        align-items: center;
        width: calc((100% - 120rpx)/2);
        box-shadow: #666 0rpx -1rpx 30rpx;
        margin-left: 40rpx;
        margin-bottom: 50rpx;
        image{      
            margin-left: 20rpx;
            width: 70rpx !important;
        }
        text{
            padding-left: 20rpx;
            flex: 1;
        }
    }
        
</style>

uni.$emit 这个是全局的事件订阅
只要在想要传值的页面onload方法中注册订阅事件,在需要传值的页面传值就可以收到回调

onload(){
      //全局事件订阅，只要订阅了事件就可以收到值
    uni.$on("globleEvent",(rel)=>{
        console.log(rel)
    })
}

触发全局事件订阅的方法为

//全局事件订阅只要注册的页面都可以收到回调值
uni.$emit("globleEvent","我是全局事件订阅的传值")