uniapp子组件弹框隐藏显示

最新推荐文章于 2024-09-07 16:36:10 发布

原创最新推荐文章于 2024-09-07 16:36:10 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #uniapp #父子组件

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

父组件
父组件使用 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>

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