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>

代碼極其簡單,我就不去一一分析了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章