uniapp 组件之间利用全局函数穿参

淡淡的烟草味﹌ 2021-07-24 12:09 635阅读 0赞

1、在接收参数的组件中监听全局函数
    		uni.$on('函数名',(形参数)=>{
    			...
    		});
    
    2、在传递参数的组件中注册全局函数
    	uni.$emit('函数名',参数)

代码示例:  
接收参数:

<template>
    	<view>meme { { this.num}}</view>
    </template>
    
    <script>
    	
    export default{ 
    	data()
    	{ 
    		return{ 
    			num:12
    		}
    	},
    	created()
    	{ 
    		uni.$on('update',(num)=>{ 
    			this.num=num;
    		});
    	}
    }
    </script>
    
    <style>
    </style>

传递参数:

<template>
    	<view>
    
    		<button type="primary" @click="get">按钮</button>
    
    		<me></me>
    		
    	</view>
    </template>
    
    <script>
    	import det from '../detail/detail.vue'
    	import me from '../me/me.vue'
    	
    export default{ 
    	data()
    	{ 
    		return{ 
    			imgArr:['a'],
    			num2:11
    		}
    	},
    	components:{ 
    		det,
    		me
    	},
    	methods:{ 
    		get()
    		{ 
    			uni.$emit('update',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>

发表评论取消回复

表情：

评论列表（有 0 条评论，635人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 组件和页面之间进行交互

一：页面向组件传递数据（或消息）【方法1】： 1、在页面发送消息，'init'是KEY，后面组件拿对应的数据（或消息）是依赖此KEY的 onLoad() {

雨点打透心脏的1/2处/ 2024年03月30日 14:35/ 0 赞/ 59 阅读

相关 vue组件传参

父传子/子传父/兄弟组件传参/其他组件传参故心故心故心故心小故冲啊 -------------------- 文章目录父传子/子传父/兄弟组件传参/其

╰半夏微凉°/ 2022年12月24日 05:50/ 0 赞/ 186 阅读

相关 uniapp的map组件

uni-app 地图使用的是腾讯地图注：中间不能有多个并列，不然编译不通过。 vue模板只能有一个根目录 <template> <view>

刺骨的言语ヽ痛彻心扉/ 2022年12月08日 05:37/ 0 赞/ 551 阅读

相关 uniapp loading 组件

> 组件：loading.vue <template> <view> <view class="cu-load load-modal" v-if

「爱情、让人受尽委屈。」/ 2021年09月19日 16:36/ 0 赞/ 990 阅读

相关 uniapp组件汇总

1. [Card卡片][Card] 2. [uni-swiper-dot轮播图指示点][uni-swiper-dot] 3. [Section章节标题][Section]

「爱情、让人受尽委屈。」/ 2021年09月07日 06:13/ 0 赞/ 774 阅读

相关 uniapp组件-Card卡片

官方组件：[https://ext.dcloud.net.cn/plugin?id=22][https_ext.dcloud.net.cn_plugin_id_22] 效

青旅半醒/ 2021年07月26日 02:24/ 0 赞/ 1490 阅读

相关 uniapp组件-button按钮

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

川长思鸟来/ 2021年07月25日 14:27/ 0 赞/ 1652 阅读

相关 flutter 组件传参

通过类的构造函数来传递参数代码示例: import 'package:flutter/material.dart'; import 'test.d

痛定思痛。/ 2021年07月25日 01:41/ 0 赞/ 592 阅读

相关 uniapp 组件传参

父组件 <v-sub @returnDate=returnDate :backGround=backGround></v-sub> import v

我会带着你远行/ 2021年07月24日 13:11/ 0 赞/ 628 阅读

相关 uniapp 组件之间利用全局函数穿参

1、在接收参数的组件中监听全局函数 uni.$on('函数名',(形参数)=>{ ... }); 2、在传递参数

淡淡的烟草味﹌/ 2021年07月24日 12:09/ 0 赞/ 636 阅读