Rumah > hujung hadapan web > uni-app > uniapp组件之间如何利用全局函数传参

uniapp组件之间如何利用全局函数传参

coldplay.xixi
Lepaskan: 2023-01-13 00:44:16
asal
3995 orang telah melayarinya

uniapp组件之间利用全局函数传参的方法:1、在接收参数的组件中监听全局函数;2、在传递参数的组件中注册全局函数,代码为【uni.$emit('函数名',参数)】。

uniapp组件之间如何利用全局函数传参

本教程操作环境:windows7系统、uni-app2.5.1版本,Dell G3电脑。

推荐(免费):uni-app开发教程

uniapp组件之间利用全局函数传参的方法:

1、在接收参数的组件中监听全局函数

uni.$on('函数名',(形参数)=>{
...
});
Salin selepas log masuk

2、在传递参数的组件中注册全局函数

uni.$emit('函数名',参数)

代码示例:

接收参数:

<template>
<view>meme {{this.num}}</view>
</template>
<script>
export default{
data()
{
return{
num:12
}
},
created()
{
uni.$on(&#39;update&#39;,(num)=>{
this.num=num;
});
}
}
</script>
<style>
</style>
Salin selepas log masuk

传递参数:

<template>
<view>
<button type="primary" @click="get">按钮</button>
<me></me>
</view>
</template>
<script>
import det from &#39;../detail/detail.vue&#39;
import me from &#39;../me/me.vue&#39;
export default{
data()
{
return{
imgArr:[&#39;a&#39;],
num2:11
}
},
components:{
det,
me
},
methods:{
get()
{
uni.$emit(&#39;update&#39;,this.num2);
}
}
}
</script>
<style scoped>
@import url("../css/a.css");
.box{
height: 375rpx;
width: 375rpx;
/* #ifdef H5 */
background-color: #4CD964;
/* #endif */
/* #ifdef APP-PLUS */
background-color: #007AFF;
/* #endif */
}
.box1{
background-color: #007AFF;
}
</style>
Salin selepas log masuk

相关免费学习推荐:编程视频

Atas ialah kandungan terperinci uniapp组件之间如何利用全局函数传参. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan