uniapp子组件弹框隐藏显示

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

关注小程序获取更多面试题和代码样例，小程序还处于开发期希望你的建议！