uniapp子组件弹框隐藏显示

最新推荐文章于 2025-02-18 22:35:22 发布

煮酒泛舟

最新推荐文章于 2025-02-18 22:35:22 发布

阅读量2.2k

点赞数 1

文章标签：微信小程序 uniapp 父子组件

本文链接：https://blog.youkuaiyun.com/simpledate/article/details/123674232

版权

本文介绍了如何在Vue应用中，父组件通过v-bind:visible.sync实现与子组件modal的显示状态同步，并详细讲解了子组件中如何通过$emit触发更新和处理用户交互。

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

父组件
父组件使用 v-bind:visible.sync 绑定显示字段，在子组件直接通过update:visible 修改数据。

<template>
	<view>
		<view @click="editHandle">
			打开子组件
		</view>
		<modal v-bind:visible.sync="visible" @editSubmit="editSubmit" />
	</view>
</template>

<script>
	import modal from "./components/modal.vue"
	export default {
		components: {
			modal
		},
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			editHandle() {
				this.visible = true
			},
			editSubmit(e) {
				this.init()
				this.visible = false
				console.log("提交回调: ", e)
			}
		}
	}
</script>

<style lang="scss">
</style>

子组件

<template>
	<view>
		<view v-show="visible" @cancel="cancel" @confirm="confirm">
			我是子组件
			<button @click="confirm"> 提交</button>
			<button @click="cancel"> 取消</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "modal",
		props: {
			visible: {
				type: Boolean,
				default: false,
				required: true
			}
		},
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			cancel() {
				this.$emit("update:visible", false)
			},
			confirm() {
				this.$emit("editSubmit", {
					res: "ok!",
					data: {}
				})
			}
		}
	}
</script>

<style lang="scss">
</style>

关注小程序获取更多面试题和代码样例，小程序还处于开发期希望你的建议！
在这里插入图片描述