父组件

<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 用法总结

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐