您现在的位置是：网站首页> 小程序设计
uni-app 事件传值this.$emit和uni.$emit
- 小程序设计
- 2021-07-04
- 818人已阅读
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>
</style>
①首先要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 >
<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>
*{
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","我是全局事件订阅的传值")