uniapp二次封装u-popup弹出框简单传递父子事件 ref调用子组件方法

向下的大树

于 2022-11-16 14:44:53 发布

阅读量3.8k

点赞数

文章标签： uni-app vue.js 前端

本文链接：https://blog.csdn.net/m0_66237295/article/details/127884769

版权

本文介绍了在Vue中如何使用ref属性来实现父组件与子组件之间的交互，包括如何从父组件中获取子组件实例，调用子组件的方法，以及在实际案例中如何应用。详细展示了在uni-app中父组件调用子组件open和close方法的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<button @click="showSecluded"></button>

<secluded ref="secluded"></secluded>

引入子组件
import secluded from "..../secluded.vue"
//注册
components:
{
    secluded 
		
},
//方法
showSecluded(){
	this.$refs.secluded.open();
	console.log("传递");
},

子组件

<template>
	<view>
        //在这里绑定
		<u-popup :show="show" @close="close" @open="open" mode="bottom" customStyle="border-radius: 16rpx">
			<view>
				<view class="popupTime">
					<view class="conPopup">
						<text class="secluded">时间表</text>
					</view>
			
		</u-popup>

	</view>
</template>

<script>
	export default {
		name: 'secluded',
		data() {
			return {
				show: false, //控制打开还是不打开
			}
		},
		methods: {
			open() {
				console.log('open');
				this.show=true 
			},
			close() {
				this.show = false
				// console.log('close');
			},
		}
	}
</script>

ref是干嘛的呢

1.获取本页面dom元素

2.拿到子组件中的data和去调用子组件中的方法

3.调用子组件中的方法

ref用法详情请参考以下、

uniapp ref 用法总结