uni-app 组件与页面事件传值 this.$emit

1、组件内页面 test.vue

<template>
    <view>
    	<text>我是test组件{
    
    {
    
    title}}</text>
        <button type="primary" @click="test">按钮传值回调</button>
    </view>
</template>

<script>
    export default {
    
    
        data() {
    
    
            return {
    
         
               myname:'哈哈'           
            };
        },
        props:{
    
    
        title:''
        },
        methods:{
    
    
            test(){
    
    
                console.log("组件中的按钮点击事件")
                //触发子视图中的该事件方法
                //定义一个事件名，在子页面中触发该方法名
                this.$emit("testShowName",this.myname)
            }         
        }
    }
</script>

2、子页面

<template>
	<view>
		//组件使用
		<test :title="title" @testShowName="testEvent"></test>
	</view>
</template>

<script>
	import test from "@/components/test/test.vue" //引入组建
	export default {
    
    
		data() {
    
    
			return {
    
    
				title:'lele'
			};
		},
		onLoad() {
    
    
			
		},
		components: {
    
    
			test 
		},
		methods: {
    
    
			testEvent(e) {
    
    
				console.log("当前事件的值就是：",e)
			}
		}
	}
</script>