uniapp父界面和子标签内方法相互调用和传值

在当前页面引入其他子标签或者其他页面时,如何在本界面调用其他页面的方法呢,对于刚接触uniapp的人来说不是很容易,这里给大家展示下uniapp本身的调用方式,当然还有其他方法可以实现,时间仓促,这里我直接上代码:

父界面

<template>
	<!--按钮--通过按钮调用子标签内部方法-->
	<button @tap="zibiaoqianShow">子标签显示</button>
	<button @tap="zibiaoqianHidden">子标签隐藏</button>
	<button @tap="zibiaoqianPrint">子标签打印</button>
	<!--子标签-->
	<zibiaoqian ref="ZBQ1" @fatherMethod1="fatherMethod1" @fatherMethod2="fatherMethod2" title="标题" text="内容"></zibiaoqian>
</template>

<script>
	import zibiaoqian from "../../ziBiaoQian/zibiaoqian.vue";
	export default {
		components: {
			zibiaoqian
		},
		methods:{
			zibiaoqianShow(){
				this.$refs.ZBQ1.show();
			},
			zibiaoqianHidden(){
				this.$refs.ZBQ1.hid();
			},
			zibiaoqianPrint(){
				this.$refs.ZBQ1.print("你好!");
			}
		}
	}
</script>

子标签界面

<template>
	<view class="zibiaoqian11" :hidden="isHidden">
		<view class="prompt-title">{{title}}</view>
		<view class="prompt-text">{{text}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isHidden: true
			};
		},
		props:{
			title: {            
			  type: String,    
			  default: '题目'    
			},
			text:{
				type: String,
				default: '',
			}
		},
		methods:{
			show(){
				this.isHidden = false;
			},
			hid(){
				this.isHidden = true;
			},
			print(e){
			//提示框显示出传来的值
				uni.showToast({
					title: e,
					icon:"none",
					duration: 2000
				}); 
			}
		}
	}
</script>

代码极其简单,我就不去一一分析了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值